CSS border-radius (Blob) generator
Tweak horizontal and vertical corner radii with slash (/) syntax — craft trendy organic blobs and copy production-ready CSS.
.blob {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
background: linear-gradient(135deg, #6366f1, #a855f7);
}How to use it
- Select a preset (drop, organic blob, pill, egg, gem) or manipulate corner sliders.
- Tune 4 horizontal and 4 vertical percentage radii to produce smooth asymmetry.
- Toggle “Live morphing animation” to see the organic shape pulse continuously.
- Pick gradient colors, element size, and copy the finished CSS code.
How it works
8-value syntax and the slash (/) divider
Most developers are used to a single border-radius value. However, the CSS specification allows elliptical corners by defining separate horizontal and vertical radii separated by a slash /. Four horizontal radii come first (clockwise from top-left), followed by four vertical radii.
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;The secret behind organic blobs
When horizontal and vertical radii differ, corners turn into smooth ellipses rather than circular quarter-arcs. When balanced across opposite corners, the rectangular element transforms into a tactile, liquid-like organic droplet.
.blob {
width: 280px;
height: 280px;
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}Smooth CSS morphing
The 8-value border-radius property interpolates seamlessly across CSS @keyframes. By alternating between two sets of radii, you can achieve a hypnotic, living breathing UI element without any JavaScript libraries.
@keyframes morph {
0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}FAQ
What is the order of corners?
Clockwise: top-left, top-right, bottom-right, bottom-left. The same order applies to the vertical radii after the slash.
Why is the slash needed in border-radius?
The slash tells the browser that the corner is an ellipse rather than a circle. Values before the slash define horizontal radii, and values after define vertical radii.
Do all modern browsers support this?
Yes, this syntax has been an official CSS standard and is universally supported across all browsers.
