Border-radius generator
Create organic blob shapes with the 8-value border-radius syntax. Drag the corners, randomize, copy the CSS.
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;About this border-radius generator
Create smooth, organic blob shapes using the full eight-value
border-radius syntax — four horizontal radii and four vertical radii. Drag each
corner independently, hit Randomize for happy-accident shapes, then copy the
CSS.
Where blobs are useful
Soft, asymmetric blobs make great decorative backgrounds, avatar frames and
hero accents. Because it’s pure border-radius, the shape stays crisp at any
size, casts normal shadows, and clips child content — no SVG required.
FAQ
What is the slash in border-radius?
The slash separates the horizontal radii from the vertical radii, letting each corner be an ellipse rather than a circle — that is what makes organic blob shapes possible.
How do I make a perfect circle?
Set border-radius to 50 percent on a square element.