🫧 Blob Generator

Generate organic blob shapes — CSS border-radius or SVG path.

Output

Color

Gradient

#6366f1

Size

280px

Horizontal Radii

Top Left 30%

Top Right 70%

Btm Right 70%

Btm Left 30%

Vertical Radii

Top Left 30%

Top Right 30%

Btm Right 70%

Btm Left 70%

About Blob Generator

Generate organic blob shapes either as CSS border-radius values (no SVG needed) or as smooth SVG paths. Tweak randomness, edge count, and animation, then copy the result.

How to use

Choose CSS or SVG mode.
Adjust the controls — points, randomness, animation speed.
Hit Randomize to explore variations until something looks right.
Copy the CSS, the SVG markup, or download the SVG file.

Common use cases

Adding organic visual interest to a hero or section divider.
Replacing rigid rectangles with softer shapes in a layout.
Decorating a card or button with a subtle accent shape.
Creating animated backgrounds that don't feel like motion graphics.

Tips

CSS mode uses the 8-value border-radius syntax — works everywhere with no SVG required.
SVG mode produces paths via Catmull-Rom interpolation, so the curves stay smooth.
Lower the points count for chunkier shapes, raise it for cloudlike fluidity.

FAQ

Should I use CSS or SVG mode?

CSS for static decorative shapes — no SVG required, works in every modern browser. SVG when you need a path you can animate, mask, or further edit.

Does the CSS version work everywhere?

Yes. The 8-value border-radius syntax is part of the CSS spec and supported in every modern browser.

Can I animate the blob?

Yes. The CSS version animates by transitioning the border-radius values; the SVG path can be tweened with CSS or any animation library.

What's Catmull-Rom?

A spline-fitting algorithm that produces smooth curves through a set of control points. SVG mode uses it so blobs look organic instead of polygonal.

More tools

About Blob Generator

How to use

Common use cases

Tips

FAQ

More tools

JSON

Code

Ornaments

Image

Web / SEO

Generators

PDF