Animating CSS Blobs: Bringing Organic Shapes to Life

The Basic Idea

Because a blob shape is just a value assigned to border-radius, and CSS can animate between different property values over time, blobs can be smoothly morphed from one shape into another using standard @keyframes — no JavaScript or SVG path animation required.

A Simple Morphing Animation

.blob {
  width: 300px;
  height: 300px;
  background: linear-gradient(45deg, #7c3aed, #4c1d95);
  animation: morph 8s ease-in-out infinite;
}

@keyframes morph {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
}

The blob smoothly interpolates between the two shapes over the animation's duration, producing a gentle, continuous morphing effect — a subtle way to add a sense of life and movement to an otherwise static design element.

Adding More Keyframe Steps

Two keyframe states produce a simple back-and-forth morph. Adding a few more intermediate steps (25%, 50%, 75%) with different border-radius values creates a more varied, less predictable-feeling cycle, closer to how an organic shape might naturally shift.

Keeping It Subtle

A slow duration (6-10 seconds or longer) with an ease-in-out timing function tends to read as calm and ambient rather than distracting — appropriate for a background decorative element that shouldn't compete with the actual content on the page. Faster, more dramatic morphing draws more attention and is better reserved for moments where that's specifically the intent.

Performance Consideration

Since border-radius changes are resolved at the paint stage rather than triggering layout recalculation, animating it is comparatively cheap — a reasonable choice even for a continuous, always-running background animation, without the performance concerns that come with animating layout-affecting properties.