SVG Blob Generator
Organic blobs for backgrounds, image masks, and accents. Two sliders, seeded shuffle, gradient fills, clean SVG out.
Local onlyEverything on this page — the preview, the randomness, and every file you download — is generated by JavaScript in this tab. Nothing you type, pick, or upload is transmitted, and the page keeps working offline.
A blob is the organic counterweight to a rectangular layout — a soft asymmetric shape behind a product shot, a mask for a portrait, an accent floating in a hero. This generator makes them properly: points are placed around a circle, pulled inward by a seeded random amount, and smoothed through Catmull-Rom curves into one continuous path, so the result is always a single closed shape with no kinks.
Complexity sets how many lobes the blob has; randomness sets how far it strays from a circle — low values give pebbles, high values give splats. The SVG export is one path element with your fill, small enough to inline. To use a blob as an image mask, wrap your image in an SVG clipPath with the path, or use the shape in any design tool that accepts SVG.
Questions this tool gets asked
What are SVG blobs used for?
Backgrounds behind product screenshots, organic image masks, decorative accents in hero sections, and empty-state illustrations. They soften layouts that are otherwise all rectangles, and because they're SVG they scale to any size at a few hundred bytes.
How do I use a blob to mask an image?
Put the blob path inside a clipPath element in an inline SVG, give it an id, and reference it from your image with clip-path="url(#yourId)" — or in CSS, use clip-path with the path() function and the blob's path data. Most design tools can also use the SVG directly as a mask layer.
Can I get the same blob back later?
The current blob persists as long as you don't press Shuffle — the sliders reshape it live. Once you shuffle, the previous shape is gone, so download or copy any blob you want to keep before rolling a new one.
Gradient or solid fill — which should I use?
Gradient fills make blobs read as lit, dimensional objects and work well behind content. Solid fills are right when the blob is a mask or needs to match a flat brand color exactly. You can also edit the fill attribute in the exported file any time.
Why does my blob look spiky at high randomness?
At high randomness with high complexity, neighboring points can land at very different radii and the curve between them tightens. Drop the complexity a little or the randomness a notch — the smoothest organic shapes live in the middle of both sliders.
Is this blob generator free and private?
Free, no signup, no watermark, ad-supported. The shape math runs entirely in this tab and exports are assembled locally — nothing you generate is uploaded.