Soft waves and organic blobs for hero sections
The rounded wave at the bottom of a hero and the soft blob behind a headline are everywhere in modern web design — and both are just smooth vector paths. This tool generates them with real control instead of hunting for a one-off SVG online.
Drag Wave height and Frequency to shape the swell, soften the curve with Smoothness, and let Blob motion wobble the accent shape into something organic rather than a plain circle. The two-color gradient ties it to your palette.
Dialing it in
- Set the wave height and frequency for the swell you want under a hero or section break.
- Raise smoothness for gentle editorial curves, lower it for punchier crests.
- Use blob motion to make the floating accent shape feel hand-drawn, not geometric.
- Pick the gradient start and end colors, then export SVG (or a transparent PNG).
Good for
- hero and footer wave dividers
- soft background blobs behind copy
- landing-page section transitions
- app onboarding and empty-state art
FAQ
Why use this instead of a static SVG wave I found online?
Because you can match the exact height, color and rhythm of your layout instead of bending a fixed file. Same shape category, but tuned to your page.
Is the blob smooth or faceted?
Smooth — the blob is drawn as a closed bezier spline, so even at high blob-motion it stays a soft organic shape with no hard corners.
Can I stack two waves for depth?
Export two with slightly different heights and colors, then layer them in your design tool with a small vertical offset for a layered, parallax-style divider.
Related tools
Tools that pair well with this one.