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:
- Define a center point and base radius
- Place N points around the center at equal angles
- Randomize each point's distance from center within a range
- 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.