Blob with no SVG at all
Free, no sign-up, runs in your browser.
When you want an organic shape but cannot or would rather not add an SVG — a component library you do not control the markup of, an email template, a CMS block that strips unknown elements.
The recipe
| Shape | Pebble |
|---|---|
| Export as | CSS border-radius |
| Size | 104 B |
Step by step
- Switch to the blob generator and pick Pebble.
- Choose CSS border-radius from the export row.
- Copy the declaration onto any element that already has a width and a height.
- Adjust the randomness and re-copy until the silhouette suits — there are only four corners to work with.
What you will be copying
.blob {
width: 320px;
height: 320px;
border-radius: 46% 52.2% 40.5% 40% / 49.8% 56.1% 39.1% 45%;
}In more detail
Know what you are giving up. A border-radius blob has four corners, each an elliptical quarter-arc, so it can only ever be a rounded rectangle pulled out of shape — it cannot have six lobes however the numbers are chosen. What you get in exchange is real: one property, no extra markup, and it transitions and animates smoothly, which an SVG path does not do without considerably more work.
Questions
Which shape should I start from for Blob with no SVG at all?
Pebble, exported as CSS border-radius. That pairing is the one this page is built around, and the preview above is that exact shape — but it is a starting point, not a rule. Every slider stays live once you open it.
How much does it add to the page?
About 104 bytes for this combination. That is smaller than a single icon and it needs no network request at all, because the shape is markup rather than an image file.
Will it work on mobile?
Yes. A wave divider is set to stretch to its container rather than keep its aspect ratio, which is what lets one shape span any screen width without letterboxing. Blobs keep their proportions, since a stretched blob is just an ellipse.
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.