How to use the SVG Blob Generator
- Click New random blob until you like the shape.
- Use Complexity for more or fewer bumps and Randomness for a rounder or wilder outline.
- Pick a solid color, a gradient or an outline.
- Download it as SVG (scales to any size) or PNG, or copy the SVG code into your HTML.
How the blobs are made
The generator places points around a circle, moves each one in or out by a random amount, and joins them with a smooth closed curve (cubic Bézier segments through every point). More points give more bumps; more randomness gives a less circular outline. The result is a single <path> — tiny, crisp at any size and easy to recolor.
Using blobs on a website
- Background decoration: place the SVG absolutely behind a hero section, with a soft color or low opacity.
- Image masks: use the blob as a
mask-imageor turn the path into aclip-path: path()to crop a photo into the shape. - Animation: generate two blobs with the same complexity and animate between them with CSS or SMIL for a “morphing” effect.
Need a pure-CSS shape instead? The Border Radius Generator makes blobs with 8 radius values. For section dividers, try the SVG Wave Generator.
Also searched as: blob generator, blob shape generator, organic shape generator, random blob svg, blob maker, svg shape generator, abstract shape generator.
Tools that pair well with the SVG Blob Generator
- CSS Clip-path Generator — Cut images and elements into any shape: pick one of 15 starting shapes — triangle, hexagon, star, arrow, chevron, speech bubble, circle, ellipse, rounded inset… — then drag the points over a sample or your own image.
- SVG Optimizer — Clean up SVGs exported from Figma, Illustrator, Inkscape or Sketch with SVGO — and check the before/after preview to make sure the icon still looks right.
- SVG to PNG Converter — Render SVG vector graphics as crisp PNG images at exactly the size you need — for app stores, social media, email or documents.
- CSS Animation Generator — Design CSS animations on a real keyframe timeline.
Frequently asked questions
How do I make a blob shape?
Click New random blob, adjust complexity and randomness, and download the SVG. Each blob is a single smooth path.
Can I use the blobs commercially?
Yes. The shapes are generated randomly on your device — use them in any project, no attribution needed.
How do I put an image inside a blob?
Use the SVG as a CSS mask (mask-image: url(blob.svg)) on the image, or copy the path into an SVG clipPath.
SVG or PNG?
SVG for websites — it stays sharp at any size and is tiny. PNG for apps that don’t accept SVG, such as some slide or social tools.
Can I install SVG Blob Generator as a web app and use it offline?
Yes. SVG Blob Generator is an installable web app (PWA) — installed from your browser, not downloaded from an app store. Click Install app at the top of this page in Chrome or Edge (Windows, macOS, Linux, ChromeOS) or on Android, use Share → Add to Home Screen on iPhone and iPad, or File → Add to Dock in Safari 17+ on a Mac. It then opens in its own window with its own icon, and because it runs entirely in your browser it keeps working offline. Firefox on desktop can’t install web apps. How installing works.