CSS Blob Shape Generator

Home/Tools/Blob Shape Generator

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

No sign-up neededRuns in your browserProduction-ready CSS

Blob Shape

6
200px

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;
}