CSS Blob Generator

Organic shapes made purely with border-radius - no clipping at all. Background images still show, borders and shadows still work, and one blob can animate smoothly into another.

About the CSS blob

Blobs are the odd one out in this tool. Every other shape here is cut out of the element with clip-path; a blob is not cut at all. It is an ordinary box whose eight corner radii happen to be uneven, and that one difference decides everything about how it behaves.

Because nothing is clipped, a blob keeps the things a clipped shape loses. It can have a real border. It takes a box-shadow that follows its outline. Its background-image shows through the whole shape. overflow: hidden clips children to the blob's own curve. And two blobs can be transitioned into one another, which is where the slow-morphing background shapes you have seen on landing pages come from.

The code

.shape {
  aspect-ratio: 1 / 1;
  border-radius: 66.82% 62.46% 40.5% 69.26% / 68.43% 35.51% 64.84% 67.3%;
  width: 240px;
  background: #0d6efd;
}

Eight numbers, one slash. The four before the slash are the horizontal radii, in the usual CSS corner order: top-left, top-right, bottom-right, bottom-left. The four after are the vertical radii for the same four corners. Give a corner a wide horizontal radius and a small vertical one and it stretches into a long, shallow curve; make them equal and you get a plain round corner. Uneven pairs on all four corners are what turns a square into something that looks hand-drawn.

Two settings

Wobble - how far the radii are allowed to stray from 50%. Low values give a gently squashed circle; high values give a lopsided pebble.
Variation - the seed. It does not make the blob more or less anything, it just picks a different one. Slide it until you find a shape you like; the same number always gives the same blob, so the result is reproducible.

Making a blob morph

This is the trick a clipped shape cannot do. Both states are border-radius values with the same structure, so the browser can interpolate every number between them:

.blob {
  border-radius: 66% 62% 40% 69% / 68% 35% 64% 67%;
  transition: border-radius 1.2s ease-in-out;
}

.blob:hover {
  border-radius: 38% 72% 55% 45% / 45% 60% 40% 55%;
}

Turn the same idea into a @keyframes animation with three or four stops and you have a shape that drifts continuously. It is cheap to run, it needs no JavaScript, and because it is a background element you can put it behind a heading and let the text sit normally on top.

Blob or SVG blob?

Use the CSS blob when it is a box: a decorative background, an avatar frame, a card. Use an SVG blob when the outline itself matters - when you want sharp inlets, a shape that is not roughly convex, or a path you will animate point by point. A border-radius blob is always four curves around a rectangle, so it can be irregular but never spiky. For downloadable SVG blob artwork with more freedom in the outline, our Blob Maker is the tool for that job.

Frequently asked questions

Why does the blob use border-radius instead of clip-path?

Because it can. Everything a blob needs is expressible as corner radii, and staying with border-radius keeps borders, shadows and background images working normally. Clipping would take all three away in exchange for nothing.

Can I put an image inside a blob?

Yes, two ways. Set a background-image with background-size: cover on the blob itself, or put an <img> inside it and add overflow: hidden so the picture is clipped to the curve. Both work, and unlike a clip-path the image can still sit under a border.

How do I get the same blob again later?

Note the Variation number. It seeds the shape, so the same value always produces the same blob - and once you have copied the CSS the eight percentages are the shape, so you can just keep the rule.

Will a blob work in older browsers?

The eight-value border-radius syntax has been supported for well over a decade, considerably longer than clip-path. If a browser is new enough to run the site at all, the blob will render.

Can I rotate a blob?

Yes, but with transform: rotate() rather than by changing the radii - the studio does exactly that when you use the rotation slider on a blob. Bear in mind a transform rotates the element's content too, so put the blob on its own element behind the content rather than on the content itself.

Menu