The SVG Blob Generator creates smooth, random organic blob shapes — the soft, rounded forms you see as decorative backgrounds, hero accents, avatar masks and section dividers across modern websites and app interfaces. Instead of hunting for the right blob in a static gallery, you shape your own: dial in the number of edges, push the irregularity for a wilder outline, recolour it, then download a crisp SVG or a high-resolution PNG. Everything happens in your browser, so there is nothing to install and nothing is uploaded.
How it works
Under the hood the generator places a ring of control points evenly around a circle. Each point’s distance from the centre is then nudged in or out by a random amount, and the irregularity slider decides how far those radii are allowed to wander — low values stay close to a clean circle, high values produce dramatic, lumpy, lava-lamp shapes. Those points are joined with smooth Catmull-Rom curves, which are converted into cubic Bezier path segments so the outline is one continuous, flowing line with no kinks. The smoothness control scales the curve tangents, letting you go from taut and minimal to soft and bubbly.
The randomness is driven by a seeded generator: the same seed always rebuilds the same shape, which means a blob you love is never lost. Press New blob to roll a fresh seed, Randomise all to also shuffle the edge count and irregularity, or type an exact seed back in. Recent seeds are kept as clickable chips, and your last configuration is saved to local storage so the tool reopens exactly how you left it.
For colour you can choose a solid fill or a two-stop linear gradient with an adjustable
angle, add an optional outline with its own colour and width, and either keep a
transparent background or bake in a solid colour. When you are happy, export a clean,
infinitely scalable SVG, a 2x PNG raster, or copy the raw <svg> markup straight into your
project.
Example
Suppose you need a soft accent shape behind a landing-page headline. Set edges to 6 and
irregularity to about 45% for a gently organic outline, pick a #6366f1 to #ec4899
gradient at a 45 degree angle, and leave the background transparent. Hit New blob a few
times until the shape feels balanced, note the seed shown beneath the canvas, then press
Download SVG. Drop that file into your page as a background and it will stay perfectly
sharp on any screen, from a phone to a 4K monitor, while adding only a couple of kilobytes.
Need the same shape for a slide deck that will not accept vectors? Press Download PNG instead — it renders the identical blob at twice the canvas resolution so it stays crisp when scaled. Want to tweak it in code later? Copy SVG code gives you the full markup, gradient definitions included, ready to paste into a component.
Every blob is generated, rendered and exported locally in your browser — no shape, colour or setting is ever sent anywhere.