🌊 SVG Wave Generator — Free Section Dividers
SVG wave generator for section dividers: control height, undulation, direction, gradient, and copy. Perfect for landing pages and hero sections.
150px
2
📚 About This Tool
SVG waves serve as visual dividers between page sections. SVG beats images because: scales without quality loss, smaller file size, color editable with CSS, and works in all modern browsers.
❓ FAQ
Where do I put the SVG code?
Directly in HTML at the section bottom, or as a CSS background-image with url('data:image/svg+xml,...').
How do I flip the wave upward?
Add transform: rotate(180deg) on the SVG element.
Can I animate the waves?
Yes — use CSS animation on the path or SMIL animateTransform.
SVG vs CSS clip-path for waves?
SVG is better for complex waves; clip-path for simple geometric shapes.