SVG Blob Generator
Generate smooth, organic blob shapes for backgrounds, image masks, and section accents. Tune the shape, pick a color, and copy the SVG — all in your browser, no upload.
Preview
Where blobs are used
Organic blob shapes soften otherwise rectangular layouts. They work as hero background accents, decorative shapes behind headings, colored backdrops for images, and — because each blob is a single path — as clip-path masks for photos. As SVG they stay razor-sharp at any size and add only a few hundred bytes to your page.
Frequently Asked Questions
What is an SVG blob?+
An SVG blob is a smooth, organic, closed shape — the soft rounded forms popular in modern web design as background accents, image masks, and section highlights. Each blob here is a single SVG <path> built from a randomised set of points wrapped in a smooth Bézier curve, so it scales to any size without losing quality.
How do I get a different blob?+
Click Randomize to generate a new seed — every seed produces a different but repeatable shape. Increase the Points value for a more complex outline and the Randomness value for a more irregular, less circular form. Lowering both gives a calm, near-circular blob.
How do I use the blob as a background?+
Copy the SVG markup and drop it inline into your HTML, or copy the CSS background snippet to use it as a background-image via a data URI. Because it is a single path, you can also paste just the path d attribute into an existing SVG or an image-masking rule.
Is anything uploaded to a server?+
No. The blob is generated entirely in your browser with JavaScript. Nothing is uploaded, stored, or logged.
Related Tools
How to use
- Drag Points and Randomness to shape the blob — the preview updates instantly.
- Pick a fill color and set the size in pixels.
- Click Randomize until you find a shape you like.
- Copy the SVG, the path, or the CSS background snippet.