CSS LabCSS border-radius and blob shape generator
The same property that rounds a button can draw a pebble. Eight numbers control the shape.
How eight values make a blob
border-radius can take two sets of up to four numbers separated by a slash. The first set is the horizontal radius of each corner, in the order top-left, top-right, bottom-right, bottom-left. The second set, after the slash, is the vertical radius of each corner in the same order. With percentages, 50% on both makes a perfect circle or ellipse; unequal numbers make the shape lopsided.
The tool's sliders are named "across" and "down" for those two sets. Each pair of neighbouring corners should add up to no more than 100% across a side. When they do, the browser scales all the radii down at the same rate so that they fit, which can surprise you: if the shape looks different from what the sliders say, check that opposite sums are near or under 100.
Where blobs help
- Behind a photo or an icon as a soft background shape.
- As the avatar frame for a profile picture.
- As decoration on a landing page. Use an animation on the radius values (changing between two blob shapes) for a gentle morphing effect, and turn it off for visitors who prefer reduced motion.
Tips
- Give the element equal width and height for the nicest results.
- Add a gradient background from the gradient generator and the blob becomes a hero decoration.
- For a perfect circle just write
border-radius: 50%on a square element.
Why does Random shape sometimes look nearly like a circle?
Random values around the middle of the range give gentle shapes. Move individual sliders towards 20% or 90% for sharper, stranger shapes.
Can I use pixels instead of percentages?
Yes, but percentages keep the shape when the box is resized.
This is an independent site. It is not connected with the W3C, MDN, Google, Apple, Mozilla or Microsoft. Browser and product names belong to their owners.