CSS Blob Generator
Generate organic blob shapes with border-radius CSS.
Organic blob shapes in CSS
Perfectly round corners can feel rigid; organic, asymmetric “blob” shapes add a soft, modern touch to avatars, backgrounds, and decorative elements. This generator produces those shapes using multi-value border-radius, with a live preview.
Hand-tuning eight border-radius values to get a pleasing blob is tedious, so a generator that lets you shape it visually saves time. Adjust until the form feels right and copy the border-radius CSS into your project.
Copy-ready blob CSS
The organic shape is an asymmetric border-radius with eight values, copied as a single property. It is generated in your browser, nothing uploaded.
Frequently asked questions
How does the eight-value border-radius make a blob?
The four values before the slash set each corner's horizontal radius and the four after set the vertical radius. Uneven pairs like "40% 60% 65% 35% / 45% 35% 65% 55%" produce the organic shape.
Can I animate the blob?
Yes. border-radius is animatable, so a keyframe that moves between two eight-value radius sets makes the blob morph. It triggers repaints, so keep blobs small or few.
Why use percentages rather than pixels?
Percentages scale with the element's width and height, so the blob keeps its shape at any size. Pixel radii lock the curve size and can flatten on large elements.
Related tools
Practical utilities for front-end design and implementation work.