Question 1

What is an SVG blob and what is it used for?

Accepted Answer

An SVG blob is a smooth, irregular closed shape that looks soft and organic rather than geometric. Designers use blobs as hero-section backgrounds, decorative accents behind text or images, avatar masks and section dividers because their gentle curves feel modern and friendly. This tool builds the shape from a ring of points whose distance from the centre is randomised, then connects them with a smooth Bézier curve.

Question 2

How do the vertices and randomness sliders change the shape?

Accepted Answer

Vertices set how many points sit around the ring: fewer points give broad, rounded lobes, while more points allow finer detail. Randomness controls how far each point is pushed in or out from the average radius: at zero the shape is a near-perfect circle, and as it rises the outline becomes increasingly wavy and irregular. Combining many vertices with high randomness produces spiky, star-like blobs.

Question 3

What is the difference between the SVG code and the CSS clip-path output?

Accepted Answer

The SVG output is a complete <svg> element with the blob drawn as a filled path, ready to drop straight into your HTML or save as a file. The CSS clip-path output is the same outline written as clip-path: path('…'), which you apply to any HTML element (such as an image or div) to crop it into the blob shape. Note that path() uses pixel coordinates, so the clipped element should match the generated size.

Question 4

Why does the tool use a seed, and is the same shape reproducible?

Accepted Answer

The blob is built with a seeded pseudo-random generator, so a given seed combined with the same vertices, randomness and size always produces exactly the same outline. Pressing New blob simply picks a new seed. Because the seed and every other setting are stored in the page URL, copying the link lets anyone reopen the identical blob — handy for sharing or revisiting a shape later.

Question 5

Can I add a gradient fill to the blob?

Accepted Answer

Yes. Turn on the gradient toggle and pick two colours; the generated SVG then includes a linearGradient definition and fills the blob with it. With the gradient off, the blob uses a single solid colour. The CSS clip-path output only describes the outline, so gradients and colours apply to the SVG snippet — for a clipped HTML element you style the fill or background yourself.

SVG BlobGenerator

SVG Blob
Generator