Design Atlas
한국어
✦ Visual effects

Morphing blob

모핑 블롭

A single shape that keeps softly warping between different organic forms, like a drop of liquid never quite settling.

Also known as: Liquid blobOrganic shape animation
···
html
<div class="blob"></div>
css
.blob{width:min(220px,72%);aspect-ratio:1;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 24px 50px color-mix(in srgb,var(--accent) 30%,transparent);
  animation:morph 8s ease-in-out infinite}
@keyframes morph{
  0%,100%{border-radius:42% 58% 70% 30% / 45% 45% 55% 55%}
  25%{border-radius:58% 42% 35% 65% / 60% 35% 65% 40%}
  50%{border-radius:50% 50% 33% 67% / 55% 27% 73% 45%}
  75%{border-radius:33% 67% 58% 42% / 63% 68% 32% 37%}}

border-radius lets each of the four corners take a separate horizontal and vertical radius, split by a slash (e.g. 42% 58% 70% 30% / 45% 45% 55% 55%). Just by combining those eight numbers, a plain rectangle can read as a circle, a droplet, or a cloud-like blob.

Animate that value between several keyframes and the shape keeps warping into different forms, reading as something alive rather than static. If neighbouring keyframes differ too sharply, the in-between motion snaps rather than flows — small, gradual changes across more steps keep it smooth.

Unlike the gooey effect, where several separate shapes drift close and merge into one, a morphing blob is a single shape continuously reshaping itself — nothing ever merges with anything else.

When to use

Use as decoration behind hero copy, or as background shape for an empty-state illustration. If it sits behind text, add blur so it doesn't compete for attention.