OneTaskBy Tim King · Updated
CSS Blob Generator
Organic Shapes With the Eight-Value Border-Radius Syntax, Dragged Corner by Corner
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Blob Generator works
This CSS blob generator shapes a box into an organic blob with one property. The eight-value form of border-radius sets a horizontal and a vertical radius for each corner
independently, which is enough to turn a square into a soft organic shape. Drag the eight sliders and
copy the single declaration that produces it.
CSS blob generator: the eight-value border-radius
Most people know border-radius as one number that rounds all four corners. The full syntax takes
eight, and that is where the organic shapes in modern hero sections come from.
How the slash works. Write four values, a slash, then four more:
border-radius: 60% 40% 30% 70% / 30% 70% 60% 40%. The first group is the horizontal radius of each
corner, going top-left, top-right, bottom-right, bottom-left. The second group is the vertical radius
of the same four corners in the same order. When the two groups differ, each corner becomes a
quarter-ellipse rather than a quarter-circle, and the outline stops looking geometric.
Percentages are what make it fluid. A percentage horizontal radius resolves against the element's width and a percentage vertical radius against its height, so the shape scales with the box instead of breaking as it grows. Pixel radii on a responsive element produce a shape that looks correct at one size and wrong at every other.
Opposing values create asymmetry. A blob reads as organic when adjacent corners disagree — a high value next to a low one — rather than when all eight are simply random. Keeping the total roughly balanced, so the four horizontal values sum to something near 200%, tends to produce shapes that look deliberate. Radii that would overlap are proportionally scaled down by the browser, so nothing you can enter is invalid.
It is one property, so it animates. Because the whole shape is a single declaration, you can transition or keyframe between two eight-value sets and get a slow morphing blob for the cost of one CSS rule. That is dramatically cheaper than the SVG path animation people usually reach for, and it works on any element, including one with a background image.
Where clip-path is the better tool. border-radius can only round corners; it cannot cut a
notch, produce a concave edge, or make more than four control points. When the shape needs true
irregularity, clip-path with a polygon or an SVG path is the right answer — at the cost of clipping
box shadows and outlines, which border-radius respects.
Content still lives in a rectangle. The element's box is unchanged: text will happily overflow
into the rounded-off region, because nothing reflows to follow the curve. Padding is the usual fix,
and shape-outside handles the separate case of wrapping neighbouring text around the curve.
FAQ
What does the slash in border-radius mean?
It separates horizontal radii from vertical radii. The values before the slash set the horizontal radius of each of the four corners, and the values after set the vertical radius of the same corners in the same order, making each corner an ellipse rather than a circle.
Should I use percentages or pixels?
Percentages for anything that changes size, because they resolve against the element's own width and height and so keep the shape proportional. Pixels are fine for fixed-size elements where you want the curve to stay exactly the same regardless of context.
Can I animate a blob shape?
Yes. border-radius is an animatable property, so transitioning or keyframing between two eight-value
sets morphs the shape smoothly. It is much cheaper than animating an SVG path and works on elements
with backgrounds, borders and shadows intact.
When should I use clip-path instead?
When the shape needs concave edges, notches, or more than four control points. clip-path can
describe any polygon or path, but it clips box shadows and outlines along with the element, which
border-radius does not.
Why does my text spill outside the blob?
Because the layout box is still a rectangle — rounding the corners does not reflow the content inside
them. Add enough padding to keep text clear of the curves, and use shape-outside if you need
neighbouring text to wrap around the outside.
See also: all Shapes & SVG tools, Layout & Spacing, Shadows & Motion, UI Components, Forms & Inputs, Colour.
Related tools
Gradient Maker
Linear, radial and conic CSS gradients with live preview.
CSS Shapes Generator
Classic single-element CSS shapes with size and colour controls.
Corner Ribbon Maker
Diagonal corner ribbons for cards, no images required.
Cubic Bezier
Shape a CSS easing curve and watch it animate.
Mesh Gradient Generator
Pure-CSS mesh gradients from stacked radial layers.