SVG Wave & Blob Generator
Layered waves, peaks and blobs in your gradient colours. Shuffle until it looks right, then copy the SVG, download a PNG or paste it in as a CSS background.
Waves, peaks and blobs
- Waves — smooth layered curves. Use one at the bottom of a hero, or between two sections as a divider; tick Flip for the top edge of the section below.
- Peaks — the same layers with straight edges, for a sharper, more graphic look.
- Blob — a single organic shape to sit behind a product shot, an avatar or a headline.
Shuffle shape draws a new variation. Every shape comes from a number (the seed), so a shared link redraws exactly the one you made.
Using it on a website
Copy the SVG and paste it straight into your HTML — it is about a kilobyte, scales to any width without blurring, and needs no image request. Or copy the CSS background: the SVG is embedded in the CSS as a data URI, so there is no file to host at all.
For a section divider, set the shape’s background to transparent and give the element the same background colour as the section below it, so the wave appears to cut into the page. The Divider size (1440 × 320) is a good starting point.
Colours
Solid layers spaces the layers evenly between your colours, blended the way the eye sees colour so the steps look even. Gradient fill gives every layer its own gradient. Start from a colour combination or press From the library.