Blob border-radius generator (CSS blob shapes)
Shape an organic blob with draggable border-radius handles and export the eight-value border-radius, an SVG path or a React component. Free to use, no account.
Choose the primitives library your project already uses. Both look the same: your theme, not the variant, controls colors, shape, type and motion.
About this generator
A CSS blob is an element whose border-radius has eight values, one horizontal and one vertical radius per corner. Dragging the handles on the preview edits those eight values, and a randomiser with a seed gives you organic starting shapes you can reproduce.
You can also morph between two shapes: the generator writes the keyframes that animate border-radius, paused off screen and static for reduced motion. Export the CSS, a Tailwind class, an SVG path or a React component that takes a theme colour.
How to use it
- Drag the handles, or randomise with a seed.
- Optionally set a second shape to morph to.
- Choose a theme colour for the fill.
- Copy the border-radius CSS, the Tailwind class or the SVG path.
This generator is also a component of the kit: Generator Border Radius Blob, installed as source in your project.
Want this inside your project?
Agentic UI Kit installs this generator and the other 1156 components as source files, with one theme for all of them. One-time license, unlimited projects.