BuildUtilities

CSS Blob Generator – Free Online Tool

Generate organic blob shapes using randomized border-radius values. Regenerate and export CSS.

✦ FreeNo SignupInstantCSSSVG & Vector Graphics Guide
200px
5
.blob {
  width: 200px;
  height: 200px;
  background: #0bbcb7;
  border-radius: 65% 53% 38% 60% / 78% 10% 27% 26%;
}

How to Use CSS Blob Generator

  1. 1

    Generate

    Click Generate to create a random blob shape.

  2. 2

    Customize

    Adjust size, color, and complexity.

  3. 3

    Copy

    Copy the border-radius CSS.

Common Use Cases

  • ✦Creating organic background shapes
  • ✦Building unique hero section decorations
  • ✦Designing blob-style avatars

Share

Share a link to this tool. Results can be passed via URL parameters.

https://buildutilities.com/share/css-blob-generator

Frequently Asked Questions

More CSS Tools

Visual CSS generators with live preview and copy-paste output.

▢ CSS Box Shadow Generator▧ CSS Gradient Generator◆ CSS Mesh Gradient Generator⬚ CSS Flexbox Playground▦ CSS Grid Generator◰ CSS Border Radius Generator
View all CSS tools
Tip Jar