Blob Generator
Organic SVG shapes for backgrounds and heroes โ copy or download.
About this generator
Roll random organic blobs, steer them with two sliders โ how many points, how wild the jitter โ pick a fill colour, and take the result as inline SVG or a downloaded file. Real vectors: points on a circle, jittered, joined by smooth Catmull-Rom curves, so they scale to any size losslessly.
Why design grew blobs everywhere
The blob became the signature of friendly-tech design for a practical reason: organic shapes soften grids without carrying meaning โ a hero background that suggests approachability with zero icon-like semantics to translate or localise. Usage patterns that work: one large blob at low contrast behind a hero, a blob as an image mask (SVG clipPath), or two overlapping at slight offsets for depth. Craft notes: low randomness reads as pebbles (calm), high as splats (playful); fewer points give toddler- simple shapes, more give coastline complexity. Fill one with a gradient for the full 2020s look, pull its colour from a photo's palette, and remember SVG pastes straight into HTML โ no image file needed.
Frequently asked questions
How do I use a blob on my website?
Paste the copied SVG directly into your HTML (it's just markup), or download the .svg and use it like any image. As vectors they scale to any size with no quality loss.
Can I use the blobs commercially?
Yes โ shapes you generate here are yours, free forever, no attribution needed.
How do I make a blob image mask?
Wrap the blob's path in an SVG clipPath and reference it from CSS (clip-path: url(#blob)) โ the classic organic photo crop. The circle crop tool does the photographic version directly.
What do the two sliders control?
Complexity is the number of points around the circle (more = wigglier); randomness is how far each point strays from the perfect circle (more = splattier). Low both = pebble; high both = ink splat.