Which settings determine the blob outline?

The seed, point count, irregularity, smoothness and rotation define the path. Fill, output background and preview background can change without altering that geometry.

How can I recreate the same shape in another session?

Record the seed together with the geometry controls. Those values deterministically regenerate the outline, whereas Randomize intentionally replaces the seed.

Are gradient SVG files self-contained?

Yes. Linear or radial gradient definitions and their colors are embedded in the SVG. The file does not rely on a hosted image or external style sheet.

Does the Preview Background appear in downloads?

No. It helps inspect the asset in the editor. Only the separate Background setting determines whether the exported SVG or PNG is transparent or contains a solid backdrop.

What is the largest custom PNG size?

Width and height can each reach 8000 pixels. A large canvas may still fail if the browser or device cannot allocate enough memory for rendering.

Back to Design & Color Tools

Blob Generator

Shape a repeatable organic silhouette, style it independently and carry the same curve into vector, raster or CSS workflows.

Blob settings

Complexity / Points

Randomness / Irregularity%

Smoothness%

Rotation°

Seed

Fill mode

Blob Color

Background

Live Preview

Preview Background

SVG Code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M 50 14.128 C 58.206 14.112 70.814 22.111 76.366 28.974 C 81.917 35.837 87.115 49.479 85.584 58.122 C 84.054 66.765 74.317 81.06 66.557 84.38 C 58.796 87.7 44.187 83.453 35.839 79.406 C 27.491 75.358 14.927 66.286 13.043 58.435 C 11.16 50.584 17.998 35.988 23.763 29.076 C 29.528 22.165 41.794 14.144 50 14.128 Z" fill="#7C3AED"/></svg>

SVG Path

M 50 14.128 C 58.206 14.112 70.814 22.111 76.366 28.974 C 81.917 35.837 87.115 49.479 85.584 58.122 C 84.054 66.765 74.317 81.06 66.557 84.38 C 58.796 87.7 44.187 83.453 35.839 79.406 C 27.491 75.358 14.927 66.286 13.043 58.435 C 11.16 50.584 17.998 35.988 23.763 29.076 C 29.528 22.165 41.794 14.144 50 14.128 Z

CSS Clip-Path

clip-path: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3CclipPath%20id%3D%22blob%22%20clipPathUnits%3D%22objectBoundingBox%22%3E%3Cpath%20d%3D%22M%200.5%200.141%20C%200.582%200.141%200.708%200.221%200.764%200.29%20C%200.819%200.358%200.871%200.495%200.856%200.581%20C%200.841%200.668%200.743%200.811%200.666%200.844%20C%200.588%200.877%200.442%200.835%200.358%200.794%20C%200.275%200.754%200.149%200.663%200.13%200.584%20C%200.112%200.506%200.18%200.36%200.238%200.291%20C%200.295%200.222%200.418%200.141%200.5%200.141%20Z%22%2F%3E%3C%2FclipPath%3E%3C%2Fsvg%3E#blob");

Download

PNG size

How to use Blob Generator

1
Start with Smooth, Organic, Wobbly, Bold or Complex, then adjust Points, Irregularity, Smoothness and Rotation.
2
Keep the Seed when you need a reproducible outline, or click Randomize for different geometry with the current styling.
3
Choose Solid, Linear Gradient or Radial Gradient fill and select a transparent or solid output Background.
4
Use Preview Background only to inspect transparent edges, then copy the SVG, Path or CSS clip-path output you need.
5
Download a scalable SVG or choose a preset or custom size and render the blob as PNG.

Frequently asked questions

About Blob Generator

Blob Generator builds a closed, smooth Bézier outline from seeded radial variation. Presets establish recognizable levels of complexity, while direct controls can move the design from a quiet rounded background accent to a more energetic irregular mask.

Geometry and appearance are deliberately separate. A stable seed preserves the curve while solid or gradient fills, export background and editor backdrop are changed. That separation makes it easier to create related assets without accidentally losing the approved silhouette.

The same underlying path is available as a complete SVG, raw path data and a percentage-based CSS clip-path. Vector downloads stay scalable, while local PNG rendering supports transparent or solid output at dimensions up to the browser's practical memory limit.