How to use the css blob generator
- Randomise a shape. Press Randomise shape a few times until you find a starting point you like.
- Fine-tune each corner. Each corner has a horizontal and a vertical radius. Unequal values on the same corner create the stretched, organic curves.
- Choose a fill. Use a solid colour or a two-colour gradient.
- Copy the CSS. Copy the rule and give the element a width and an aspect-ratio of 1, or matching width and height.
How CSS blobs work
The border-radius property accepts two sets of values separated by a slash: four horizontal radii and four vertical radii, one per corner. When the values differ, each corner curves elliptically, and together they form a smooth irregular shape without any SVG.
Animating blobs
Because the shape is made of numbers, you can animate between two border-radius values with a CSS transition or keyframes for a slow, morphing background effect. Keep the movement subtle and respect prefers-reduced-motion.
Where to use them
Blobs work well as soft backgrounds behind product shots, avatar frames, decorative accents in hero sections and image masks with overflow: hidden.
Frequently asked questions
Can I put an image inside a blob?
Yes. Apply the border-radius to an image or to a wrapper with overflow: hidden, and the image is clipped to the blob shape.
Why use CSS instead of SVG?
A CSS blob is a single line of code, scales with its element and can be animated with transitions. SVG is better when you need sharp points or very complex outlines.
What percentages should I use?
Values between 20% and 80% give smooth shapes. Values near 0% create flat sides, which make the shape look more like a pebble or a rounded rectangle.