CSS Blob Generator

Generate organic blob shapes with an 8-value border-radius. Randomize, tune complexity and fill, then copy the CSS or export an SVG.

Shape

Complexity50%

Size280px

Fill

gradientsolid

Color 1

#6366f1

Color 2

#ec4899

Angle135deg

Live Preview

border-radius CSS

.blob {
  width: 280px;
  height: 280px;
  border-radius: 63% 37% 70% 30% / 30% 70% 37% 63%;
  background: linear-gradient(135deg, #6366f1, #ec4899);
}

SVG Export

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 280" width="280" height="280">
  <defs>
    <linearGradient id="blob-gradient" gradientTransform="rotate(135)">
      <stop offset="0%" stop-color="#6366f1" />
      <stop offset="100%" stop-color="#ec4899" />
    </linearGradient>
  </defs>
  <path d="M 88.2 0 L 228.2 0 Q 280 0 280 98 L 280 228.2 Q 280 280 182 280 L 42 280 Q 0 280 0 191.8 L 0 42 Q 0 0 88.2 0 Z" fill="url(#blob-gradient)" />
</svg>