SVG Wave Generator
Generate smooth or layered SVG waves for section dividers and hero backgrounds, then copy or download them.
SVG code
How it works
This SVG wave generator draws a smooth wave path from a handful of random control points and joins them with cubic bézier curves, so every shape stays perfectly smooth at any size. The seed makes the result repeatable — the same seed always gives the same wave — while Randomize wave picks a fresh one. Raise the layer count for the stacked, semi-transparent look used in hero sections, flip the wave to sit at the top of a section, or switch the fill to a two-colour gradient.
Because the output uses preserveAspectRatio="none" and a percentage width, the
wave stretches to fill any container and stays crisp on every screen. Paste the markup
straight into your HTML, copy it as a CSS background-image data URI, or
download a standalone .svg file. Everything is generated in your browser with
plain JavaScript — nothing is uploaded, there is no sign-up and there are no ads.
Frequently asked questions
How do I make an SVG wave for my website?
Set the height, wave count and amplitude, pick a colour, then press Randomize wave until you like the shape. Copy the SVG markup and paste it into your HTML at the top or bottom of a section — give the wrapping element position: relative and the wave position: absolute with left: 0 and width: 100% to make it sit flush against the section edge.
How do I use an SVG wave as a CSS background image?
Press Copy CSS background. That gives you a ready-made rule with the wave inlined as a data:image/svg+xml URI, so there is no extra HTTP request and no image file to host. Paste it into your stylesheet and rename the .wave-divider class to whatever your markup uses.
Are the generated SVG waves responsive?
Yes. The SVG uses a viewBox with width="100%" and preserveAspectRatio="none", so it stretches to fill any container width while keeping the height you chose, and it stays perfectly sharp on retina and 4K screens because it is vector, not a bitmap.