How to Create a CSS Blob Shape: Step-by-Step Guide

Step-by-Step

1. Adjust the corner sliders to shape the blob — watch the live preview update as you go.
2. Try a preset or hit randomize if you'd rather start from something interesting than a blank square.
3. Fine-tune individual corners until the shape feels right for your design.
4. Copy the generated CSS and paste it into your stylesheet.

Using the Blob in Your Design

.blob-shape {
  width: 300px;
  height: 300px;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  background: linear-gradient(45deg, #7c3aed, #4c1d95);
}

The shape applies to any element with a defined width and height — a plain <div> is the most common choice, styled with a background color or gradient and positioned as a decorative element behind or alongside your actual content.

A Sizing Detail Worth Knowing

Blob shapes generated with percentage values are relative to the element's own width and height — so the shape's proportions change if the element resizes. This is often desirable (the blob adapts to different screen sizes), but if you need a shape that stays visually identical regardless of container size, use fixed units like pixels instead of percentages.