by GelFuzion
Home / CSS Generators / Border-Radius Blob
01.05CSS Generators

Border-Radius Blob Generator

Eight radius values, one organic shape. Shuffle until something feels right, fill it with a gradient, and export a slow morph animation in plain CSS.

Updated
Horizontal radii (before the slash)
Vertical radii (after the slash)
CSS

          

        

      

      

    


  

    

      

      

      

        
How an 8-value border-radius makes a blob

        
Most people only ever write border-radius: 12px. The full property is far more expressive. Each corner can have its own horizontal and vertical radius, written as four values, a slash, then four more:


.blob {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

        
Before the slash are the horizontal radii for top-left, top-right, bottom-right and bottom-left. After the slash are the vertical radii in the same clockwise order. When a corner has a horizontal radius of 30% and a vertical radius of 70%, it becomes a quarter of a tall, narrow ellipse instead of a quarter circle. Four mismatched corners produce the soft, lopsided pebble shape designers call a blob.

        
The 100% rule

        
Along any edge, the two radii that touch it should add up to 100% or less. If the top-left and top-right horizontal radii sum to 140%, the browser scales every radius on the element down until they fit, which is why tweaking one value sometimes seems to reshape the whole blob. The Randomize button keeps each edge pair summing to exactly 100%. That gives the fullest, smoothest blob without flat sides, and it is the usual starting point in hand-made blobs too.

        
Where blobs work well

        
    
          
  • Avatar and photo frames. Apply the radius straight to an img with object-fit: cover. No mask or SVG needed.
    • 
          
  • Background accents. A large blurred blob behind a hero headline adds color without a hard edge. Add filter: blur(40px) and lower the opacity.
    • 
          
  • Buttons and badges where a perfect pill looks too corporate.
    • 
          
  • Loading states. A slowly morphing blob reads as alive without the urgency of a spinner.
    • 
        

        
Animating the morph

        
border-radius interpolates smoothly between any two sets of values, so a morph is just a keyframe animation that moves through three or four shapes. Keep it slow: a cycle of 8 to 15 seconds with ease-in-out feels organic, while anything under 4 seconds starts to look jittery. Because changing the radius does not affect layout, the animation is cheap, but it still repaints, so avoid running dozens at once.

        
Always pair decorative motion with a reduced motion guard. The generated CSS sets animation: none inside @media (prefers-reduced-motion: reduce), and this page respects the same setting in the preview.

        
Sizing tips

        
Percentages are relative to the element's own width and height, so a blob on a rectangle stretches with it. Use aspect-ratio: 1 for an even shape, or deliberately use a wide box for a flatter, puddle-like form. If you need the blob to stay identical at every size, percentages are the right choice; pixel radii change character as the box grows.


        
Frequently asked questions

        

          
What does the slash in border-radius mean?
Values before the slash are horizontal radii for the four corners, values after it are vertical radii. Giving each corner a different horizontal and vertical radius turns circles into the asymmetric curves that make a blob.

          
Why do my blob values not seem to change the shape?
When two radii on the same side add up to more than 100%, the browser scales all radii down proportionally. Keep each pair along an edge at or under 100% for predictable results.

          
Is a border-radius blob better than an SVG blob?
For backgrounds, avatars and decorative shapes it is lighter and easier to animate, and it works on any element including images. SVG paths can make sharper, more complex shapes with points and concave curves.

          
Will the morph animation bother users sensitive to motion?
The exported CSS turns the animation off inside a prefers-reduced-motion media query, so users who ask their operating system for less motion see a still blob.