How to Make a CSS Blob (Organic Shape)

Create an organic, squishy-looking “blob” in pure CSS using either advanced border-radius values or a clip-path. Below are two reliable techniques plus a live preview you can copy.

Live Preview: Blob (Organic Shape)

Method 1: Using Complex Border-Radius

.blob {
  width: 140px;
  height: 140px;
  background: #cd5454;

  /* Elliptical 8-value border-radius makes an organic blob */
  border-radius: 58% 42% 40% 60% / 50% 60% 40% 50%;
}

.blob {
  width: 140px;
  height: 140px;
  background: #cd5454;

  /* Elliptical 8-value border-radius makes an organic blob */
  border-radius: 58% 42% 40% 60% / 50% 60% 40% 50%;
}

Method 2: Using clip-path: polygon()

.blob {
  width: 150px;
  height: 150px;
  background: #cd5454;

  /* Irregular polygon that reads as a soft blob */
  clip-path: polygon(
    54% 0%,
    70% 8%,
    85% 23%,
    93% 42%,
    87% 64%,
    73% 80%,
    52% 90%,
    31% 86%,
    16% 72%,
    9% 52%,
    13% 31%,
    27% 15%,
    43% 6%
  );
}

.blob {
  width: 150px;
  height: 150px;
  background: #cd5454;

  /* Irregular polygon that reads as a soft blob */
  clip-path: polygon(
    54% 0%,
    70% 8%,
    85% 23%,
    93% 42%,
    87% 64%,
    73% 80%,
    52% 90%,
    31% 86%,
    16% 72%,
    9% 52%,
    13% 31%,
    27% 15%,
    43% 6%
  );
}

How This Works

The border-radius method uses the elliptical 8-value syntax (A B C D / E F G H), where the first four values affect the horizontal radii of the corners and the values after the slash affect the vertical radii. Unequal pairs bend each corner differently, producing a smooth, organic outline.

The clip-path method cuts the element to a custom polygon. By plotting many points around an imaginary circle, you get a natural-looking shape. Increasing the number of points yields a smoother blob; fewer points look more jagged.

How to Center Content Inside a Blob (Organic Shape)

The easiest way to center text or icons inside the blob is to use Flexbox or Grid on the blob element.

Method 1: Use CSS Flexbox

.blob {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;    /* vertical */
}

.blob {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;    /* vertical */
}

Method 2: Use CSS Grid

.blob {
  display: grid;
  place-items: center; /* centers both axes */
}

.blob {
  display: grid;
  place-items: center; /* centers both axes */
}

When to Use Each Shape Method

Use border-radius when you want a smooth, anti-aliased, lightweight blob that’s easy to resize and animate with border-radius transitions. Use clip-path when you need more control over the outline (including concave features) or want to craft very irregular silhouettes, knowing it may need more points to look smooth.

Quick Customizations

Change the color with background: yourColor; (e.g., a gradient) and add depth with box-shadow. For subtle variety, tweak each border-radius percentage (or the clip-path points) a little to instantly generate a new blob.

Accessibility & SEO

If the blob is decorative, mark it aria-hidden=”true”; if it conveys meaning, give it a role and an aria-label so assistive technologies understand it.