CSS Blob Generator

Create organic blob shapes using CSS border-radius.
Adjust complexity and randomize to get unique shapes.

Complexity5 points

SimpleComplex

Size200px

Color

CSS Code

.blob {
  width: 200px;
  height: 200px;
  background: #3b82f6;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

How CSS Blob Shapes Work

Blobs use the 8-value border-radius syntax where each corner has horizontal and vertical radii, creating asymmetric organic shapes.

border-radius: a b c d / e f g h;
First 4 values are horizontal radii, last 4 are vertical radii for each corner.

Perfect for hero backgrounds, decorative elements, image masks, feature highlights, and adding organic aesthetics to modern web designs.

Frontend Hero's CSS Scanner lets you inspect and copy any CSS including border-radius, backgrounds, and more from any website in 2 clicks.

Get Frontend Hero now →

Create grid layouts visually

Create flex layouts visually

Create custom gradients

Gradient text effects

275+ ready-to-use gradients

Design multi-layer shadows

Style text highlight colors

Style custom scrollbars

Mix colors with blend modes

Preview all cursor styles

Create loading animations

Design buttons with hover effects

Create neon glow effects

Scale text across screen sizes