SVG Wave Generator
Generate smooth SVG wave dividers with amplitude, count, flip, and colour controls.
Soften the seam between sections
A wave divider is the little curved shape that lets one coloured section flow into the next instead of butting up against a flat edge. It is a staple of modern landing pages, but hand-drawing the path and getting it to stretch cleanly across every screen width is tedious.
Set the amplitude and how many waves you want, flip it to face up or down, choose a fill to match your next section, and the tool writes a full-width SVG with preserveAspectRatio="none" so it scales edge to edge. Copy it straight into your markup.
Private and instant
Every wave is generated in your browser. Nothing is uploaded.
Frequently Asked Questions
What is an SVG wave divider?
It is a full-width SVG shape with a wavy top edge, filled below, that you drop between two sections so they meet with a curve instead of a hard line.
How do I use the output?
Paste the SVG at the top or bottom of a section. It uses preserveAspectRatio none, so it stretches to any width; flip it to point the wave the other way.
Is it private?
Yes. The SVG is generated in your browser with no upload and no sign-up.
Browse the full set of free, private, in-browser tools.