SVG Blob Generator
Generate organic, randomized SVG blob shapes from a complexity and contrast setting, regenerate variations with a seed, preview them live, and copy the SVG or CSS clip-path.
SVG Blob Generator — Set how many points the shape has (complexity) and how irregular its edges are (contrast), then hit Regenerate to roll a new random variation from the next seed. A live preview shows the blob as you tweak it, and you get both the full SVG markup and a CSS clip-path you can paste into a stylesheet. Everything is computed in your browser with a seeded random generator; no shapes, colors, or settings ever leave your device.
What is SVG Blob Generator?
The SVG Blob Generator is a free in-browser tool for designers and front-end developers who want soft, organic blob shapes for backgrounds, hero sections, avatars, or decorative accents without drawing them by hand. You control two sliders' worth of values: complexity (the number of anchor points around the shape) and contrast (how far each point wobbles from a perfect circle). A seed in state, bumped by the Regenerate button, lets you cycle through endless variations while keeping your complexity and contrast fixed. The output is rendered as a single smooth closed Bezier path, so you can copy clean SVG markup, grab a CSS clip-path() rule to mask any element, or download a ready-to-use .svg file. Use it to create on-brand decorations quickly or to learn how blob paths are built from points around a circle.
How to use SVG Blob Generator
- Open Settings and set the complexity (number of points, 3-16) for the shape.
- Set the contrast (0-100) to control how irregular and wobbly the edges are.
- Pick a fill color with the color chip or by typing a HEX value.
- Click Regenerate to roll a new random variation from the next seed until you like the shape.
- Copy the SVG markup or the CSS clip-path rule, or click Download to save a .svg file.
Examples
Soft background blob
Set complexity to 6 and contrast to about 40 for a gentle, rounded blob, then regenerate a few times until you find a pleasing shape for a hero or card background.
Spiky organic shape
Raise the complexity to 12 and the contrast to 80 for a more jagged, energetic silhouette, useful for badges or playful illustrations.
CSS clip-path mask
Copy the generated clip-path: path('...') rule and apply it to an image or div so the element is cropped to the blob outline.
Frequently asked questions
- What do complexity and contrast control?
- Complexity is the number of anchor points placed evenly around a circle (3 to 16) — more points make a more detailed outline. Contrast is how far each point is randomly pushed in or out from the base radius (0 to 100), so 0 is close to a plain circle and 100 is highly irregular.
- How does the Regenerate button work?
- Each blob is built from a numeric seed plus your complexity and contrast. Regenerate increases the seed by one and recomputes the shape, so you get a fresh random variation every click while your complexity, contrast, and color stay the same.
- What is the difference between the SVG and the clip-path output?
- The SVG output is a complete, standalone <svg> file you can embed or download. The clip-path output is a single CSS rule using path() that you can apply to any HTML element to crop it into the same blob outline.
- Can I change the color and download the file?
- Yes. Set the fill color with the color chip or a HEX value; the preview, SVG, and download all use it. Click Download to save a blob.svg file generated entirely in your browser.
- Are my shapes or settings sent to a server?
- No. The blob is generated with a local seeded random function and all SVG and clip-path strings are built in your browser. Nothing is uploaded, so the tool works offline and your work stays private.
Related tools
Code to Image
Turn a code snippet into a polished, syntax-highlighted PNG card in your browser, with a theme, gradient or transparent background, and padding — no upload.
Color Contrast Checker
Check the WCAG contrast ratio between a foreground and background HEX color and see whether it passes AA and AAA for both normal and large text.
Color Mixer
Blend two HEX colors at a chosen ratio in RGB or Lab color space and read the resulting mid color back as a swatch and copyable HEX value.
Color Shades Generator
Turn one base HEX color into a Tailwind-style 50-950 shade scale, mixing toward white and black, each step with a swatch and copyable HEX.