Border Radius Generator
Control all eight border-radius values independently to build organic blob shapes. Randomise, preview live, copy the CSS.
Top Left
Top Right
Bottom Right
Bottom Left
.blob {
border-radius: 60% 30% 70% 40% / 40% 70% 30% 60%;
}About the border radius generator
border-radius accepts eight values, not four. The slash syntax lets you set a horizontal and a vertical radius for each corner separately, and that is what turns a rounded rectangle into an organic blob.
Blobs like this are everywhere in modern landing pages as background shapes behind photos or feature sections. They cost nothing, scale perfectly, and can be animated between shapes.
How to use it
- 1Start from a preset, or hit Randomise until something looks right.
- 2Adjust the horizontal and vertical radius for each corner separately.
- 3Values near fifty percent give the roundest blobs, mixed values give asymmetry.
- 4Copy the CSS.
Worth knowing
- The slash separates horizontal radii from vertical radii, in the order top-left, top-right, bottom-right, bottom-left.
- You can animate between two blob shapes with a CSS transition for a slow morphing effect.
Questions
What does the slash in border-radius mean?
Everything before the slash sets the horizontal radius of each corner; everything after sets the vertical radius. Different values on each axis is what creates an organic curve rather than a circular one.
How do I make a perfect circle?
Set border-radius to 50% on an element with equal width and height.
Can blob shapes be animated?
Yes. Transition border-radius between two sets of values and the shape morphs smoothly.