CSS Blob Shapes with Border Radius

What Are CSS Blobs?

Blobs are organic, amorphous shapes that break away from the rigid rectangles of traditional web layouts. They add visual softness and movement to backgrounds, hero sections, and decorative elements. Think lava lamp blobs, ink drops, or melting shapes — all created purely with CSS border-radius.

The secret to blob shapes lies in the eight-value syntax of border-radius, which lets you control each corner's horizontal and vertical radius independently.

The Eight-Value Syntax

Most developers know the shorthand border-radius: 10px (all corners) or border-radius: 10px 20px 10px 20px (one value per corner). But the full syntax uses a slash to separate horizontal from vertical radii:

.blob {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

The values before the slash set horizontal radii for top-left, top-right, bottom-right, and bottom-left. The values after the slash set the vertical radii for the same corners.

When horizontal and vertical radii differ at the same corner, the browser draws an elliptical arc instead of a circular one. This asymmetry is what produces the organic blob effect.

Understanding the Mapping

border-radius: [TL-h] [TR-h] [BR-h] [BL-h] / [TL-v] [TR-v] [BR-v] [BL-v];

Creating Blob Variations

Soft Blob

.blob-soft {
  width: 300px;
  height: 300px;
  border-radius: 60% 40% 70% 30% / 50% 60% 40% 60%;
  background: #a78bfa;
}

Stretched Blob

.blob-stretched {
  width: 400px;
  height: 250px;
  border-radius: 50% 60% 40% 70% / 60% 40% 70% 50%;
  background: #34d399;
}

Sharp Organic Shape

.blob-sharp {
  width: 300px;
  height: 300px;
  border-radius: 80% 20% 60% 40% / 40% 60% 20% 80%;
  background: #f472b6;
}

Minimal Blob

.blob-minimal {
  width: 300px;
  height: 300px;
  border-radius: 50% 50% 45% 55% / 55% 45% 55% 45%;
  background: #60a5fa;
}

The closer all values are to 50%, the more circular the shape. Pushing individual values to extremes (80%/20%) creates more dramatic deformations.

Animating Blobs

Blobs come alive with animation. Use @keyframes to morph between border-radius values:

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

.blob-animated {
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  animation: morph 8s ease-in-out infinite;
}

Performance Tip

Border-radius animation is GPU-accelerated in modern browsers, making it efficient for continuous animations. However, combine it with transform for the best performance profile:

@keyframes morph-float {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    transform: translateY(0) rotate(0deg);
  }
  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    transform: translateY(-20px) rotate(5deg);
  }
}

Practical Design Patterns

Hero Background Blobs

<section class="relative overflow-hidden">
  <div class="absolute -top-20 -left-20 w-96 h-96 bg-purple-300/30
              border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
              blur-xl"></div>
  <div class="absolute bottom-0 right-0 w-80 h-80 bg-pink-300/30
              border-radius: 40% 60% 70% 30% / 40% 70% 30% 60%;
              blur-xl"></div>
  <div class="relative z-10">
    <!-- Hero content -->
  </div>
</section>

Profile Avatar Blob

.avatar-blob {
  width: 120px;
  height: 120px;
  border-radius: 62% 38% 58% 42% / 48% 62% 38% 52%;
  object-fit: cover;
}

Decorative Card Accent

.card::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 40% 60% 50% 50% / 60% 40% 60% 40%;
  background: rgba(99, 102, 241, 0.1);
  z-index: -1;
}

Combining Blobs with Gradients

Blobs paired with gradients produce rich, layered visuals:

.blob-gradient {
  width: 400px;
  height: 400px;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  filter: blur(0px);
}

Multi-stop gradients on blobs create a sense of volume and light direction:

.blob-volume {
  width: 300px;
  height: 300px;
  border-radius: 70% 30% 50% 50% / 40% 60% 40% 60%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 50%),
    linear-gradient(135deg, #4f46e5, #7c3aed);
}

Related Guides

• Border Radius Guide
• CSS Shapes and Borders
• CSS Rounded Corners Tutorial

Try It Yourself

Generate blob shapes visually — drag corner handles, pick gradient colors, and copy the CSS with our interactive border-radius tool.

👉 Border Radius Generator