CSS Border-Radius Blob Maker

Basic Blob

.blob {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 60% 40% 30% 70% / 50% 30% 70% 40%;
}

Animated Blob

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

.blob {
  animation: blob-morph 8s ease-in-out infinite;
}

Responsive Blob

.blob {
  aspect-ratio: 1;
  width: min(40vw, 400px);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 60% 40% 30% 70% / 50% 30% 70% 40%;
}

What browsers support complex border-radius?

All modern browsers support the 8-value border-radius syntax (Chrome, Firefox, Safari, Edge). It's been supported since 2011.

Can I use blob shapes for images?

Yes! Apply the border-radius to an img element or use it as a clip-path. You can also use the SVG export as a mask for more complex effects.

Do animated blobs affect performance?

CSS animations are GPU-accelerated and generally performant. However, limit to 2-3 animated blobs per page and avoid animating on mobile for best performance.

How do I make blobs responsive?

Use relative units like vw, vh, or percentage widths. The responsive CSS output uses min() function to cap maximum size while allowing scaling.

Can I export blobs as images?

You can export as SVG, which is a vector format. To convert to PNG/JPG, open the SVG in a graphics editor or use an online SVG-to-PNG converter.