SVG Blob Generator
Shuffle organic blobs, fill with colour, gradient or photo, and export as SVG, PNG, path or clip-path. Every shape is seeded, so you can always get it back.
- Seed
- 428517
- Points
- 6
- SVG
- 645 B
The path is the d attribute on its own; the CSS is a clip-path rule that cuts an element to this shape.
How it works
How to make an SVG blob?
Set the shape
Pick a preset or use the sliders. Edges control outline points; growth controls roundness.
Shuffle until one is right
Hit shuffle for a new blob at the same settings. Eight alternatives sit under the preview.
Colour it
Fill with a solid colour, gradient, radial, or your own photo. Add outline or shadow if needed.
Take it away
Download SVG or PNG, or copy the SVG, path, or CSS clip-path into your code.
Spec sheet
Features worth using
Shapes you can get back
Every blob has a seed on screen and in the filename. Enter it anytime to recreate the exact shape.
Edges, growth and rotation
3–20 outline points, nine steps of roundness, and rotation that turns a shape without replacing it.
Solid, gradient or radial
Flat fill, linear or radial gradients, ready-made palettes, and a random colour pair button.
A photo inside the blob
Crop any picture to the shape. The image is embedded in the SVG, so it works offline.
Four ways out
Download SVG or PNG, or copy the markup, path data, or CSS clip-path — same shape every time.
Nothing is uploaded
Everything runs in your browser. No uploads, no account, no watermark.
The two sliders
What edges and growth actually do?
A blob is a circle whose radius wanders. Edges is how many times it is allowed to wander — the number of points the outline curves through. Growth is how close the nearest point may come to the centre, so it sets how deep the valleys go. Every shape below is drawn by the same code as the tool above.
Growth, at eight edges
Low growth cuts deep valleys and reads as a splash. High growth barely leaves the circle.
Edges, at growth five
Three edges is a rounded triangle. Past a dozen the bumps get small enough to read as texture rather than form.
Where they go
What to use an SVG blob for?
| Use | How |
|---|---|
| Hero and section backgrounds | A large, low-contrast blob behind a headline breaks up a flat page without the weight of a photo. Keep the backdrop transparent so the page colour shows through. |
| Avatar and image masks | Fill with a photo instead of a colour. The picture is cropped to the shape and centred, so a square portrait comes out organic rather than boxed. |
| CSS clip paths | Copy the clip-path rule and drop it on a div, an image or a video of the same size. The element is cut to the blob, and everything inside it stays live. |
| Slides, posts and thumbnails | A PNG with a transparent background drops straight into a deck, a story or a canvas app as a shape you can move around. |
| Logos and stickers | Turn the outline on and the fill off for a drawn line, or stack two blobs at different seeds for a lockup with depth. |
Questions