SVG Wave Generator
Generate SVG waves for free — make smooth, peaked or stepped waves with up to five layered colours, adjust height and waviness, flip them to the top, and copy the SVG code or download an SVG or PNG. Perfect for website section dividers, headers and footers.
100% private — everything runs in your browser. Conversion happens on your device; nothing is uploaded.
Waves stretch to any width (preserveAspectRatio=”none”), so paste the SVG at the top or bottom of a section as a divider. Lower the opacity layers or pick two close colours for a subtle look. Free for personal and commercial use.
How to make an SVG wave
- Choose a wave style and number of layers.
- Adjust wave height, waviness and fill height.
- Pick the back and front colours, and flip if you need the wave at the top.
- Copy the SVG code or download SVG / PNG.
What you can use it for
- Add wave dividers between website sections
- Create hero and footer backgrounds
- Make wavy shapes for slides and social graphics
- Design landing pages without image files
More free tools
Building for the web?
Format, minify, convert and generate code with our free, private developer tools.
See all free tools →Frequently asked questions
How do I use the wave on my website?
Copy the SVG code and paste it into your HTML between two sections, with width: 100% in your CSS. It stretches to any width without blurring.
How do I put the wave at the top of a section?
Tick Flip. The wave is rotated so the solid edge is at the top.
Can I make it match my brand colours?
Yes — set the back and front colours; the layers in between blend from one to the other.
Why does each wave look different?
Waves are randomised. Click New random wave until you like one; the SVG code always matches the preview.
Is it free for commercial use?
Yes, with no attribution needed.