CSS Glassmorphism Generator

Frosted-Glass UI Effect • Live Preview • Ready-to-Use CSS

Customize
Blur12px
Tint Color
Tint Opacity20%
Border Radius16px
Border Opacity30%
Shadow Intensity37%
Live Preview
Glassmorphism
Adjust the controls to shape this frosted-glass card, then copy the CSS below.
CSS Code

                        

                             backdrop-filter needs something visually interesting behind the element to actually see the blur — a background image, gradient, or photo. It won't show much over a plain solid color.
                        

                    

                

            

                    
        

    


    
    

        

            
 About

            
 Contact

        

        

            
About CSS Glassmorphism Generator

            
Glassmorphism is a modern UI design style that mimics frosted glass — a semi-transparent surface with a blurred background showing through, a soft light border, and a subtle shadow that helps it appear to float above the page. This tool lets you shape that effect visually with sliders and color pickers, previewing it live over a colorful background, then copy the exact CSS needed to reproduce it: background, backdrop-filter, border, and box-shadow, including the -webkit-backdrop-filter prefix for Safari support. All processing happens locally in your browser.