CSS Blob Shapes: A Complete Guide

Blob shapes—those organic, fluid forms that feel alive on the page—have become a signature element of modern web design. Unlike rigid geometric shapes, blobs add warmth, movement, and visual interest to interfaces. In this guide, you'll learn multiple techniques for creating blob shapes, from pure CSS to SVG-based approaches.

What Makes a Blob?

A blob is essentially a shape with smooth, curved edges and no sharp corners. Mathematically, blobs are created using spline curves or Bézier curves that flow naturally from one point to another. The key characteristics are:

• Organic, asymmetrical form
• Smooth, continuous curves without sharp angles
• Closed path that can be filled with color or gradients
• Often inspired by natural forms like water droplets or amoebas

Method 1: CSS clip-path with polygon()

The simplest approach uses CSS clip-path with carefully positioned percentage-based points. While polygon() creates straight edges between points, using many points creates the illusion of curves:

.blob-polygon {
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  clip-path: polygon(
    30% 0%, 70% 0%, 100% 30%,
    100% 70%, 70% 100%, 30% 100%,
    0% 70%, 0% 30%
  );
}

This creates an octagon-like shape. For smoother blobs, you'd need many more points—which becomes impractical to write by hand.

Method 2: CSS clip-path with ellipse()

For simple curved shapes, ellipse() gives you smooth edges:

.blob-ellipse {
  width: 400px;
  height: 300px;
  background: #f093fb;
  clip-path: ellipse(45% 40% at 50% 50%);
}

/* Offset ellipse for asymmetry */
.blob-offset {
  clip-path: ellipse(50% 45% at 55% 45%);
}

While limited to elliptical forms, this method has excellent browser support and is easy to animate.

Method 3: SVG Path Blobs

For true organic blob shapes, SVG paths with cubic Bézier curves are the gold standard. The 'C' command in SVG creates smooth curves:

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <path fill="#FF0066" d="
    M 100, 20
    C 140, 20  180, 60  180, 100
    C 180, 140  140, 180  100, 180
    C 60, 180  20, 140  20, 100
    C 20, 60  60, 20  100, 20
    Z
  "/>
</svg>

Each 'C' command takes three coordinate pairs: two control points and an endpoint. By varying the control points, you create different curve intensities.

Method 4: clip-path with SVG path()

Modern browsers support path() directly in clip-path, combining the power of SVG curves with CSS flexibility:

.blob-path {
  width: 300px;
  height: 300px;
  background: linear-gradient(45deg, #f093fb, #f5576c);
  clip-path: path('
    M 150,20
    Q 250,50 280,150
    Q 250,250 150,280
    Q 50,250 20,150
    Q 50,50 150,20
    Z
  ');
}

The 'Q' command creates quadratic Bézier curves with a single control point—simpler than cubic curves but still organic-looking.

Generating Random Blobs

Creating unique blobs programmatically involves distributing points around a center and connecting them with curves. Here's a simplified algorithm:

1. Define a center point and base radius
2. Place N points around the center at equal angles
3. Randomize each point's distance from center within a range
4. Connect points with smooth curves using spline interpolation

function generateBlob(points = 6, radius = 100, variance = 0.4) {
  const angleStep = (Math.PI * 2) / points;
  const pts = [];
  
  for (let i = 0; i < points; i++) {
    const angle = i * angleStep;
    const r = radius * (1 + (Math.random() - 0.5) * variance);
    pts.push({
      x: 100 + Math.cos(angle) * r,
      y: 100 + Math.sin(angle) * r
    });
  }
  
  return createSmoothPath(pts); // Spline function
}

Animating Blobs

Animated blobs create mesmerizing effects. For CSS-only animation, transition between border-radius values:

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

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

For SVG blobs, use SMIL animation or JavaScript libraries like GSAP to morph between path definitions.

Making Blobs Responsive

SVG blobs are inherently responsive when using viewBox. For CSS blobs, use percentage-based dimensions and consider aspect-ratio:

.responsive-blob {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1;
  background: #667eea;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

Use Cases for Blob Shapes

Blobs work beautifully in several contexts:

• Hero sections: Large background blobs add visual interest without overwhelming content
• Card backgrounds: Subtle blob shapes behind cards create depth
• Section dividers: Replace straight lines with organic curves between sections
• Image masks: Clip photos into blob shapes for a modern look
• Loading animations: Morphing blobs make engaging loaders

Generate Blobs Instantly

Creating perfect blobs by hand is tedious. Use the stellae.design blob generator to create custom blobs instantly—adjust complexity, randomness, and export as SVG or CSS with one click.

Browser Support

clip-path is supported in all modern browsers. For clip-path: path(), support landed in Chrome 88+, Firefox 97+, and Safari 13.1+. SVG blobs work everywhere. For older browser fallbacks, use progressive enhancement with @supports.

Conclusion

Blob shapes transform rigid interfaces into inviting, organic experiences. Whether you choose CSS border-radius hacks, clip-path, or SVG paths depends on your needs: border-radius for simple animated blobs, clip-path for masking images, and SVG for complex custom shapes. Experiment with the techniques above, or speed up your workflow with blob generator tools that handle the math for you.