How does a single border-radius value make an irregular blob?

border-radius accepts up to eight values (four for horizontal radii, four for vertical, separated by a slash) — one for each corner's horizontal and vertical curve. Setting them all to different percentages instead of one uniform value pulls each corner in a different amount, producing an asymmetric, organic-looking outline instead of a rounded rectangle.

Is this better than using an SVG or image for a blob shape?

For a simple background decoration, a border-radius blob is lighter-weight than an SVG file or image, scales with CSS, and can have its color changed instantly. For more complex or precisely-designed organic shapes, an SVG path (or clip-path: path()) gives finer control.

Can I animate the blob shape?

Yes — border-radius is animatable. Define two blob shapes as @keyframes states and transition between them for a subtle morphing, gooey background effect, or add transition: border-radius 0.4s ease; and swap the value on hover.

Why does my blob look like a plain circle or rectangle instead of organic?

If the eight radius values are close to each other (e.g. all near 50%) the shape approaches a circle; if they're close to 0% it approaches a rectangle. Click Randomize shape a few times — this tool intentionally spreads the values apart for a more visibly irregular outline.

Does this tool send my design anywhere?

No — the shape is generated with Math.random() and rendered entirely in your browser. Nothing is uploaded to a server.

CSS BLOB GENERATOR

Randomize an organic blob shape, pick a size and color, then copy the CSS.

Size: 220px

Color

CSS

.blob {
  width: 220px;
  height: 220px;
  background: #ff6a35;
  border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%;
}

How to build a CSS blob shape

1
Click Randomize shape to generate a new organic blob outline.
2
Adjust the size and color on the live preview.
3
Keep randomizing until you find a shape you like.
4
Copy the generated .blob CSS and paste it into your stylesheet.

Questions

How does a single border-radius value make an irregular blob?: border-radius accepts up to eight values (four for horizontal radii, four for vertical, separated by a slash) — one for each corner's horizontal and vertical curve. Setting them all to different percentages instead of one uniform value pulls each corner in a different amount, producing an asymmetric, organic-looking outline instead of a rounded rectangle.
Is this better than using an SVG or image for a blob shape?: For a simple background decoration, a border-radius blob is lighter-weight than an SVG file or image, scales with CSS, and can have its color changed instantly. For more complex or precisely-designed organic shapes, an SVG path (or clip-path: path()) gives finer control.
Can I animate the blob shape?: Yes — border-radius is animatable. Define two blob shapes as @keyframes states and transition between them for a subtle morphing, gooey background effect, or add transition: border-radius 0.4s ease; and swap the value on hover.
Why does my blob look like a plain circle or rectangle instead of organic?: If the eight radius values are close to each other (e.g. all near 50%) the shape approaches a circle; if they're close to 0% it approaches a rectangle. Click Randomize shape a few times — this tool intentionally spreads the values apart for a more visibly irregular outline.
Does this tool send my design anywhere?: No — the shape is generated with Math.random() and rendered entirely in your browser. Nothing is uploaded to a server.