Two outputs, two different techniques
The [msm_tool slug="blob-generator"] produces the same idea two ways, and they are not interchangeable.
The CSS form is a border-radius shorthand with eight values — four horizontal radii, then four vertical ones after a slash. Splitting them lets each corner be elliptical rather than circular, and that alone is enough to make a rectangle read as an organic lump. Because the values are percentages, the shape scales with the element and reflows with the layout.
The SVG form samples points around a circle at varying radii and joins them into a closed curve. It is a real path, so it can do things eight radii cannot.
The CSS form cannot curve inward
This is the limit worth understanding before choosing. border-radius rounds corners inward from the box; it has no way to push an edge in toward the centre. Every CSS blob is therefore convex — a rounded rectangle with uneven corners, however irregular it looks.
If you want a genuine inlet, a pinch, or an asymmetric bulge, that needs a path, which is what the SVG output is for.
How the SVG curve is built
Points are sampled at intervals around a circle, each pushed in or out by a random amount, and then joined with cubic Bézier segments derived from Catmull-Rom control points. That last part is why it matters: a Catmull-Rom spline passes through every sampled point rather than near them, and it closes without a visible seam where the ends meet.
Joining random points with straight lines gives a polygon. Joining them with naive curves gives a shape with a kink where it closes. This is the reason the outputs look organic rather than lumpy.
More points means busier, not smoother
The instinct is that more sample points produce a smoother curve. The opposite is true at a fixed irregularity: more points means more places for the outline to deviate, so the shape reads as busier and less rounded.
For the soft background shapes these are usually used for, five to eight points with moderate irregularity is the useful range. Twenty points produces something closer to a splash than a blob.
Every regeneration is random
There is no seed and no history. The settings alone will not reproduce a shape you liked — copy the CSS or the SVG the moment you see one you want.
That is worth saying plainly because it is the most common frustration with any generator of this kind. Two blobs generated from identical settings are different blobs.
Where each output belongs
- CSS — a decorative shape on an element that resizes: an avatar frame, a section background, a hover state on a card. It costs nothing, needs no extra markup, and adapts to any dimensions.
- SVG — a background illustration, a masked photograph, anything needing concave edges. It is a fixed path, so it will distort if stretched to a very different aspect ratio unless the viewBox is handled properly.
The layout still uses the rectangle
Whichever form you use, the element occupies its full box. A blob applied as a clip path does not make surrounding text flow around the curve — content flows around the rectangle, exactly as it does for any clipped element.
If text should follow the shape, that is shape-outside, which takes similar values and does a different job.
Restraint
Blobs became ubiquitous around 2019 and are now firmly dated when overused. One as a background accent behind a hero section reads as considered. Four of them in different colours reads as a template.
They also carry no meaning, so they are decoration in the strictest sense: nothing should depend on a user perceiving one, and they need no alternative text because there is nothing to describe.