Blob Shape Generator

Generate organic SVG blob shapes and border-radius blobs with randomize and color controls.

Blob Shape

Complexity (Points)6

Size200px

Color

Preview — SVG Blob

CSS border-radius Variant

Generated Code

/* Option 1: CSS border-radius blob */
.blob {
  width: 200px;
  height: 200px;
  background: #6366f1;
  border-radius: 40% 52% 32% 60% / 48% 66% 69% 42%;
}

/* Option 2: SVG clip-path */
.blob-svg {
  width: 200px;
  height: 200px;
  clip-path: path('M 100.00 35.93 C 120.49 34.32, 169.97 41.16, 177.62 55.19 C 185.26 69.21, 162.60 109.61, 150.96 129.42 C 139.32 149.23, 116.81 186.39, 100.00 187.27 C 83.19 188.15, 47.74 153.48, 38.89 135.28 C 30.04 117.08, 31.85 80.85, 41.01 65.94 C 50.18 51.04, 79.51 37.55, 100.00 35.93 Z');
  background: #6366f1;
}

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS Blob Generator?

Generate organic blob shapes using border-radius with multiple values. Randomize for a new shape or drag sliders for fine control. Copy the CSS.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Blob Generator

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Click Randomize for a new shape

Each click generates a new organic blob shape. The eight border-radius values update in real time.

Fine-tune with sliders

Adjust each of the eight corner values (four horizontal, four vertical) independently for precise control.

Copy the CSS

Click Copy to get the border-radius value. Optionally include the morph animation for a breathing blob effect.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

styles.css

.blob {
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, #6C2EF5, #f97316);
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: morph 8s ease-in-out infinite;
}

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

The two slash-separated groups in border-radius set the horizontal and vertical radii independently for each corner, creating organic asymmetric shapes.

Pro tips

Pro tips for better results

★

Blobs look best as decorative background elements

Use blobs as large background shapes behind hero sections, not as content containers. Content inside an organic shape is hard to lay out.

★

The morph animation needs matching point counts

Animating between two border-radius values with the same slash format (four/four values) transitions smoothly. The values change but the corner structure stays the same.

★

Use pointer-events: none on decorative blobs

Background blobs should not capture mouse clicks or touch events. Add pointer-events: none so they are invisible to interaction.

FAQ

Frequently asked questions

The slash separates horizontal and vertical radii. Before the slash: horizontal radius for each corner (TL TR BR BL). After the slash: vertical radius for each corner. Using different values creates elliptical corners.

No. Everything runs in your browser. Nothing is sent to a server.