Aus denselben Einstellungen entstehen zwei recht verschiedene Formen. Die CSS-Variante ist eine border-radius-Kurzschreibweise mit acht Werten — vier waagerechten und vier senkrechten Radien, getrennt durch einen Schrägstrich — die jede Ecke elliptisch statt kreisförmig werden lässt und ausreicht, damit ein Rechteck wie ein organischer Klecks wirkt. Die SVG-Variante nimmt Punkte rings um einen Kreis in wechselnden Abständen und verbindet sie zu einer geschlossenen Kurve, die weit unregelmäßiger ausfallen kann, als acht Radien es erlauben.
Die Kurve entsteht, indem Catmull-Rom-Kontrollpunkte in kubische Bézier-Segmente umgerechnet werden, sodass der Pfad durch jeden abgetasteten Punkt läuft und sich ohne sichtbare Naht schließt, wo die Enden zusammentreffen. Die Unregelmäßigkeit bestimmt, wie weit jeder Punkt vom Grundradius abweicht, und die Punktzahl, wie viele Punkte genommen werden — mehr Punkte bei gleicher Unregelmäßigkeit ergeben eine unruhigere, weniger runde Kontur. Jede Neuerzeugung ist zufällig, dieselben Einstellungen liefern also jedes Mal einen anderen Klecks.
Zwischen den beiden Ausgaben wählen
-
Die CSS-Variante skaliert mit dem Element:
Ihre Werte sind Prozentangaben, die Form passt sich also jeder Größe an und fließt mit dem Layout. Nach innen gewölbte Kanten kann sie nicht erzeugen — mehr lässt sich mit acht Radien nicht ausdrücken.
-
Die SVG-Variante kann wirklich unregelmäßig sein:
Nach innen gewölbte Kurven, scharfe Einbuchtungen und Asymmetrie sind alle möglich, weil die Kontur ein echter Pfad ist und nicht vier gerundete Ecken.
-
Zu einem Klecks, der Ihnen gefiel, führt kein Weg zurück:
Die Form wird jedes Mal zufällig neu erzeugt. Kopieren Sie die Ausgabe, bevor Sie etwas ändern, denn die Einstellungen allein reproduzieren sie nicht.
-
Ein beschnittenes Element belegt weiterhin sein Rechteck:
In der SVG-Vorschau wird die Form als Beschnittpfad angewandt, umgebende Inhalte fließen also um den Kasten herum und nicht um die Kurve.
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.