Blob Generator — Organic SVG Backgrounds With Full Control

Design organic SVG backgrounds: four interpolation styles, gradients, layers and any canvas size.

A blob is an organic rounded shape used as a background. This designs one on a real canvas — pick the aspect ratio you are working to, and the shape is sized from it rather than floating as a circle in the middle. Points are scattered around an ellipse and joined in one of four ways: smooth curves, looser waves, straight peaks or right-angled steps, which is what turns the same points into a soft cell, a crystal or a staircase. Add a gradient, stack layers for depth, switch to an outline, then export as SVG, PNG at up to 3×, or an eight-value CSS border-radius. Every shape has a seed, so the URL recreates it exactly.

Runs in your browser

Interpolation: Smooth, wave, peak and step — the same points, four shapes
Canvas: Six aspect presets, or any size up to 4000 px
Export: SVG, PNG at 1×, 2× and 3×, or CSS border-radius
Reproducible: Seeded — the URL recreates the exact shape
Privacy: Runs entirely in your browser — nothing is uploaded
Cost: Free, unlimited, no sign-up

Frequently asked questions

Should I use the SVG or the CSS version?

CSS when you just need a soft shape behind something — it needs no extra element and animates smoothly between values. SVG when the outline itself matters: an eight-value border-radius can only describe the rounded-rectangle family, so it cannot reproduce a genuinely irregular blob, a peak or a step shape at all.

Why does the same seed always give the same blob?

The randomness comes from a seeded generator rather than Math.random, so the shape is a pure function of its settings. That means the URL of this page recreates your exact shape for anyone you send it to, and randomising only changes the seed — so every shape you pass through is reachable again by typing its number.

What do the interpolation styles actually change?

Only how the points are joined, never where they are. Smooth runs a Catmull-Rom spline through them; wave uses the same spline with looser tension so it bulges between points; peak joins them with straight lines; step uses right angles. The same seed and complexity under all four gives you four related shapes rather than four unrelated ones.

How do I use one as a page background?

Export the SVG at the aspect ratio you need and set it as a background-image with background-size: cover. Because it is vector, one file covers every screen size without a second export — and at a few hundred bytes it costs less than any raster alternative.

What are layers for?

Each extra layer draws a smaller, fainter copy of the shape behind the main one, with its own variation. It reads as depth rather than as separate shapes, and it is the quickest way to make a flat background feel composed.

How to use the blob shape generator

1Pick the canvas ratio you are designing for.
2Set complexity and contrast, then try each interpolation style.
3Choose a palette, or set the fill and background yourself.
4Randomise until you like one — the seed keeps it — then export.

Embed this tool

Put the working blob shape generator on your own site. It runs in your visitors' browsers exactly as it does here — free, no account, nothing uploaded.

CSS Border Radius GeneratorDrag eight handles to shape every corner: elliptical radii, inverted corners and squircles.CSS Clip Path GeneratorCut an element to a polygon, circle, ellipse or inset, and copy the clip-path.CSS Box Shadow GeneratorDesign a CSS box-shadow with live values for offset, blur, spread and colour.CSS Button GeneratorDesign a button and copy the CSS, including the hover, active and focus-visible states.CSS Shape GeneratorGenerate triangles, arrows, stars and other shapes using pure CSS.Glassmorphism CSS GeneratorCreate frosted-glass CSS with backdrop blur, transparency and a subtle border.

Last updated 1 Aug 2026

More css generators