CSS Border-Radius & Fancy Blob Generator
Generate organic fluid shapes, asymmetric cards, and smooth CSS morphing keyframe animations with the 8-value border-radius syntax.
Horizontal Radii (Width %)X Axis
Vertical Radii (Height %)Y Axis
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
Understanding the Slash (/) Syntax in Border-Radius
Most web developers only use 1 to 4 pixel values for border-radius (e.g. border-radius: 8px), which forces circular corner arcs. However, the official W3C CSS specification allows you to define elliptical corners using the slash separator:
border-radius: [horizontal-tl] [horizontal-tr] [horizontal-br] [horizontal-bl]
/ [vertical-tl] [vertical-tr] [vertical-br] [vertical-bl];When you vary the horizontal and vertical radius of each corner independently, rectangular boxes deform into natural, stone-like pebbles and organic blobs that bring handcrafted human warmth to clean digital typography.
Creative Applications
- ✓Hero Background Blob Illustrations
Add subtle, floating organic fluid blobs behind your SaaS headline or screenshot to create soft, modern depth without hefty vector SVG files.
- ✓Asymmetric Creative Agency Cards
Give team member headshots, case study cards, and portfolio tiles unique pebble or shield profiles that catch attention.
- ✓Pill Badges & Smooth Interactive Buttons
Design non-traditional CTA buttons with asymmetric rounded corners that gently morph or rotate on hover.
- ✓Fluid CSS Keyframe Morphing Animations
Animate between three or four 8-value border-radius configurations to create living, breathing organic liquid shapes in pure CSS.
Generator Capabilities
Complete 8-Value Dual-Axis Support
Control all 4 horizontal radii and 4 vertical radii independently to unlock millions of organic asymmetric curves.
Ready-to-Use Organic Presets
Instant access to popular shapes like Natural Leaf, Smooth Egg, Knight Shield, Pebble, Water Droplet, and Lemon.
Morphing Keyframe Animation Generator
One-click copy of production-ready `@keyframes` CSS animation that loops fluid blob transitions infinitely.
Vibrant Gradient Previews
Preview your custom blob with curated designer colorways including Aurora, Sunset, Emerald, and Cyberpunk gradients.
Frequently Asked Questions
How does the 8-value CSS border-radius syntax work?
CSS border-radius can take two sets of four values separated by a forward slash (`/`). The four numbers before the slash represent the horizontal radii (width curve) for top-left, top-right, bottom-right, and bottom-left. The four numbers after the slash define the vertical radii (height curve) for the exact same corners.
Why do percentage values create smoother blobs than pixels?
Percentage radii scale proportionally with the width and height of the container. For example, `50%` creates an ellipse centered on the axis. Mixing asymmetric percentages like `30% 70% 70% 30% / 30% 30% 70% 70%` forces each corner's curve to blend into the next without sharp breaks.
Can I animate 8-value border-radius smoothly?
Yes! Because `border-radius` values are numeric percentages, modern browser rendering engines interpolate between different percentage values at 60fps or 120fps with hardware-accelerated smoothness.
Is this supported across all modern browsers?
Yes, the slash syntax for `border-radius` is a CSS Level 3 standard supported across Chrome, Safari, Firefox, Edge, and iOS/Android browsers without any vendor prefixes.
More CSS & UI Tools
Need a Brain Break? ☕
Done working on your task? Take a quick 60-second break, test your reflexes, and flap through infinite pixel obstacles in Sky Flap!