CSS Border Radius / Blob Generator

Organic Blob Shapes • Live Preview • Ready-to-Use CSS

Shape Corners
Top Left
H42%
V58%
Top Right
H68%
V35%
Bottom Right
H38%
V65%
Bottom Left
H60%
V40%
Live Preview
CSS Code

                    

                

            

                    
        

    


    
    

        

            
 About

            
 Contact

        

        

            
About CSS Border Radius / Blob Generator

            
Most people only ever use border-radius with a single value for uniformly rounded corners, but the property actually accepts up to eight values — a horizontal and vertical radius for each of the four corners, separated by a slash. Setting these independently is what produces smooth, organic "blob" shapes rather than simple rounded rectangles. This tool lets you shape each corner individually with sliders, hit Randomize to explore unexpected shapes instantly, and copy the finished border-radius declaration when you find one you like. All processing happens locally in your browser.