CSS border-radius
Free, no sign-up, runs in your browser.
The shortest blob in CSS: eight percentages on one property, no SVG anywhere. It is a genuinely different shape from the SVG blobs, and it is offered as its own thing rather than as the same blob in another format.
A CSS border-radius export, trimmed to the first few lines
.blob {
width: 320px;
height: 320px;
border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
}What to know
- One property on an element you already have — nothing to paste into the markup.
- Only four corners, so it cannot reproduce a six-lobed blob and does not pretend to.
- Animates and transitions smoothly, which an SVG path does not do without extra work.
- The values are generated inside the browser's own scaling limit, so what you see is what renders.
Browser support
Universal. The eight-value slash syntax has been supported since the property itself. Blobs only — a wave has no four-corner equivalent, which is why this format is disabled on the wave generator rather than quietly producing something wrong.
Size across the presets
Every preset this format can express, measured as the generator emits it. The smallest is Hexagon at 94 bytes; the largest is Sparkle at 110 bytes. Point count is what drives the difference — each extra point adds a full cubic segment of coordinates.
| Format | Size |
|---|---|
| Hexagon | 94 B |
| Splat | 102 B |
| Pebble | 104 B |
| Flower | 104 B |
| Bubble | 106 B |
| Rounded triangle | 108 B |
| Crystal | 108 B |
| Soft blob | 110 B |
| Organic blob | 110 B |
| Faceted gem | 110 B |
| Star burst | 110 B |
| Sparkle | 110 B |
In more detail
There is a rule in the CSS spec that catches almost every generator of this kind. If the two radii meeting on one edge add up to more than the length of that edge, the browser computes a single scale factor from the worst edge and multiplies **every** radius by it. One bad pair does not just flatten one corner — it shrinks the roundness of the whole shape, so the browser draws something visibly different from the preview. The pairs here are generated so each sums to at most 100%, which makes that factor exactly 1 by construction rather than by luck.
Questions
Which shapes work as CSS border-radius?
This format covers Blob. That is a real constraint rather than a limitation of this tool — where a generator is missing from that list, the format genuinely cannot express it, and offering it anyway would hand you something that silently draws the wrong shape.
How big is a CSS border-radius export?
Between 94 and 110 bytes across the 12 presets that support it. Fewer points is the lever that matters; smoothness and colour cost nothing.
Can I edit it by hand afterwards?
Yes. The output is plain text with no generator comment, no identifying markup and no link back here. Change the colours, rename the class, or paste the path into your own SVG — nothing downstream depends on it staying as it was.
Every figure and every shape on this page was produced by running the generator at build time, so it describes the tool you are about to use rather than a version of it that once existed.