SVG Wave Generator
Design layered SVG waves for section dividers and backgrounds.
Waves For Section Dividers And Hero Backgrounds
Design layered waves for the edges of website sections, hero banners and footers. Choose up to five layers, how wavy and how tall they are, a smooth, peaked or stepped shape, and a colour that fades from the front layer to the back. Randomise until you like it.
The download is a tiny SVG — one path per layer — with preserveAspectRatio="none" set so it can stretch to fill a full-width section. Use it as an image, a CSS background or inline, flip it for the top of a section, or export a PNG.
Key features
- 1 to 5 layers with automatic colour fading.
- Smooth, peaks or steps shapes.
- Divider and background sizes, top or bottom placement.
- Seeded randomness — the same seed gives the same waves.
- SVG and PNG download, or copy the code.
This tool runs entirely inside your browser using native Web APIs. Your files and text are never uploaded to a server, never logged and never shared with third parties.
How to use: SVG Wave Generator
- Set layers and waviness
Fewer points give gentle swells; more give choppy water. - Pick colours
The front colour fades to the back colour. - Randomise
Until the shape suits the design. - Download or copy
Place it at the bottom or top of a section.
Technical specifications
| Processing location | Entirely in your browser — no server round trip |
|---|---|
| Data uploaded | None. Files and text never leave your device |
| Price | Free — no account, no trial, no usage cap |
| Category | Design |
| Works offline | Yes, once the page has loaded |
| Browser support | Chrome 90+, Edge 90+, Firefox 90+, Safari 15+ |
| Interface languages | English, 中文, हिन्दी, Español, العربية |
Frequently asked questions
How do I add a wave divider to my website?
Put the SVG at the bottom of a section, give it width: 100% and a height, and set the section below to the same colour as the wave. With preserveAspectRatio="none" it stretches to any screen width.
How do I put the wave at the top of a section?
Choose Top (flipped) and the waves are mirrored vertically, ready to sit at the upper edge.
Should I use SVG or PNG?
SVG — it is a fraction of the size, scales to any width and stays sharp on high-density screens. Use PNG only where SVG is not accepted.
Can I use the waves commercially?
Yes. The shapes are generated on your device and are yours to use in any project, with no attribution required.
Can I get the same wave again?
Yes — the waves come from a seeded generator, so the same settings and seed always produce the same shape.