Contact

Tools  /  CSS  /  CSS Blob Generator

CSS

CSS Blob Generator

An organic, randomised blob shape from border-radius alone -- with manual per-corner sliders, symmetry lock, fill colour/gradient, a morphing animation option, presets, and export to CSS, Tailwind, SCSS or React.

More CSS tools

CSS Transition Generator CSS Background Generator CSS Clamp Generator CSS Media Query Generator CSS Container Query Generator CSS Specificity Calculator

What this tool does

Builds an organic blob shape using CSS's full 8-value border-radius syntax alone — no SVG path, no clip- path polygon, just a single property most people only ever set to one uniform value.

How the shape is built

border-radius actually takes up to 8 independent values — a horizontal and vertical radius for each of the four corners — and this tool exposes all 8 as separate sliders. A symmetry lock keeps the vertical values matched to the horizontal ones for shapes that stay smooth in one direction, or it can be unlocked for fully asymmetric, more irregular blobs.

Fill and animation

Fill as a solid colour or a two-colour gradient with an adjustable angle. An optional morph animation smoothly interpolates between the current shape and a second, related radius set generated to look organic rather than jarring — producing a gently shifting blob rather than a static one.

Presets and randomizing

Six named presets — Classic Blob, Teardrop, Pebble, Cloud, Amoeba, and Wavy Circle — plus a Reset back to a perfect circle, and a randomize button for exploring the shape space without adjusting all 8 sliders by hand.

Getting the CSS out

Export as plain CSS (including the @keyframes when morphing is on), a Tailwind arbitrary-value class string, SCSS, or a React inline style object, copyable with one click.

Privacy

Everything runs locally in your browser -- nothing you build is sent to a server.

FAQ

Frequently asked questions

Is my data uploaded anywhere?
No. The blob shape is built and rendered entirely in the browser -- nothing is sent to a server.
Does this need SVG or clip-path to work?
No -- the entire shape comes from CSS's border-radius property alone, using its full 8-value syntax (a horizontal and vertical radius per corner) rather than SVG or clip-path.
What does the symmetry lock do?
It keeps each corner's vertical radius matched to its horizontal radius, producing a shape that stays smooth in one direction -- unlocking it allows fully independent, more irregular values for a more asymmetric blob.
How does the morphing animation work?
It generates a second, related border-radius set nudged from the current one so the shape looks organic rather than jarring, then animates between the two with an alternating @keyframes loop at an adjustable speed.
What presets are available?
Classic Blob, Teardrop, Pebble, Cloud, Amoeba, Wavy Circle, and a Reset back to a perfect circle -- each sets all 8 corner values together for a specific shape.
What export formats are available?
Plain CSS (with the @keyframes included when morphing is on), a Tailwind arbitrary-value class string, SCSS, or a React inline style object -- selectable from a dropdown next to the code output.
Theme Accent