SVG Wave Generator
Generate beautiful SVG wave shapes for website backgrounds and sections.
Frequently Asked Questions
Can this export a PNG image of the wave?
No. The output modes are SVG markup and a CSS background snippet. Download gives you either wave-shape.svg or wave-background.css depending on the selected mode.
How many wave layers can I stack?
Up to 6. If you try to add a seventh layer, the tool shows “Maximum of 6 layers reached.”
Can I make the background transparent instead of filling it with a color?
Yes. The Transparent checkbox removes the background <rect> from the generated SVG, so only the wave paths remain.
What does CSS output mode actually generate?
It converts the current SVG into a data:image/svg+xml URL and returns four CSS lines: background-image, background-repeat, background-position, and background-size.
Why do the waves look smooth even though there is no point editor?
The shape is generated from sine-wave samples and then connected with cubic Bézier segments. Internally it uses 48 steps per layer, so you are editing amplitude, frequency, offset, and phase rather than dragging points.