Organic CSS Blob Shape Generator
Design CSS border-radius visually: four independent corner sliders in px or percent, a link-all-corners shortcut for instant circles and pills, plus an organic blob mode with randomized shapes.
Processed entirely in your browser — nothing you enter here is ever uploaded.
Result
About this tool
This page opens the border-radius generator directly in blob mode with an organic shape already loaded: no square corners, no perfect circle, just a soft irregular outline built from CSS alone. Hit Randomize any time for a fresh variation.
The trick behind every CSS blob is the eight-value slash syntax: border-radius accepts two sets of four percentages separated by a slash, the first set curving the horizontal radii and the second the vertical ones. Mismatching the two sets is exactly what breaks the symmetry of a plain rounded rectangle into an organic outline.
Blobs like this fill the empty space behind hero images, avatars and illustrations on countless modern landing pages, precisely because no library or SVG export is needed — it is four lines of CSS. Copy the current shape, or keep randomizing until one feels right for your layout.
Example. All four corners set to 50% copy a border-radius declaration of 50%.
Limit. Each corner is either px or percent; there is no separate elliptical long-radius control.