SVG Wave Generator
Shape layered SVG waves and section dividers online, then export in one click — as an SVG, a transparent PNG or a CSS background. Free and unlimited.
A wave divider in three moves
An SVG wave is the soft, curved edge that separates one section of a page from the next — a crest of colour where a flat border would be. Because it is generated as vector math, it stays razor-sharp at any width and weighs almost nothing. Here you shape it live and layer several crests for depth.
- 1Explore. Hit Randomize (or press Space) until the flow feels right.
- 2Refine. Dial in the amplitude, number of waves, layers and colours — flip it to cap the top or the bottom of a section.
- 3Export. Download the SVG or a transparent PNG, copy the markup, or paste the CSS background straight into your stylesheet.
The blob generator runs on the same vector engine for organic shapes. Set your divider over a mesh gradient backdrop, add a glass panel or a little grain to finish the layout.
Good to know
SVG file, markup or CSS — which do I use?
Download SVG for a file you can drop into any design tool or <img>; Copy SVG to paste the markup inline and style it; Copy CSS for a ready-made background-image data-URI — perfect for a section divider with no extra HTTP request.
How do I place it as a section divider?
Paste the CSS onto a full-width block sized to the wave height, or drop the SVG at the top or bottom of a section. The shape stretches to any width (preserveAspectRatio="none"), so it always spans edge to edge.
How do I make a wave divider between two sections?
Set the edge to Bottom and match the wave colour to the section above it, then place the SVG (or the Copy CSS background) at the foot of that section so its crest dips into the section below. The wave spans any width, so the two coloured bands meet on a soft curve instead of a flat line. Want the seam tighter? Lower the Amplitude; want more drama? Raise it and add a second Layer.
Can I export a transparent PNG wave?
Yes — Download PNG rasterises only the wave shape, so everything around it stays fully transparent. Drop it over any background and just the crest shows. For the crispest result at large sizes, prefer Download SVG; reach for the PNG when a tool needs a flat raster image.
How do I get a gradient wave?
The fill is already a gradient between your From and To colours. For a smoother, richer blend turn on Middle colour to add a third stop in the centre — handy for easing two distant hues together without a muddy midpoint. The gradient is baked into the SVG, the markup and the CSS, so every export matches the preview exactly.
How do I flip the wave to the top?
Use the Top / Bottom toggle in the Shape panel. Top caps the upper edge of a section — perfect for a footer cap or the lid of a banner — while Bottom hangs the crest below, the usual choice under a hero. Flipping mirrors the same shape, so your amplitude, layers and colours all carry over.
Will it stay sharp on every screen?
Yes. It is pure vector, so it scales to any size — from a phone to a 4K hero — without a single soft pixel, and the file stays tiny.
Is it free for commercial use?
Completely. Everything you generate is yours to use freely in personal and commercial work — no sign-up, no limits and no attribution required.
Where wave dividers work
A wave earns its place wherever a hard horizontal line would feel abrupt. The most common spot is a hero's bottom edge — let the coloured crest spill down into the content below so the fold reads as one flowing scene rather than two stacked boxes. The same shape is just as useful as the divider between two adjacent sections: when the background colour changes from one band to the next, a wave makes the handover feel deliberate and soft instead of bluntly switched. Flip it upward to build a footer cap, sealing the page with a calm curve before the small print. And on a smaller scale the same path works as a card or banner edge — a single gentle crest along the top of a pricing card or a call-to-action strip adds personality without shouting.
Layered vs single waves. A single wave is crisp, fast and reads cleanly at small sizes — ideal for a card edge or a tight divider. Stack two or three layers, each at a slightly different opacity and offset, and you get a sense of depth, like overlapping swells of water — the look that suits a full-width hero. More layers mean a richer, more organic edge but a marginally larger file; one layer keeps things minimal. Tune the count with the Layers slider and nudge each crest apart with Offset until the rhythm feels right.