CSS Glassmorphism Generator

Create stunning glassmorphism (frosted glass) CSS effects by adjusting blur, transparency, border and background — with a live preview on a gradient background.

15%
12px
20%
16px
Glass Card
Glassmorphism preview
Generated CSS

        

        
      

      

      

        
What Does This Tool Do?

        
Generate CSS glassmorphism effects with adjustable blur, background transparency, border opacity and border radius. A live preview shows the card on a gradient background exactly as it will appear.

      

      

        
Key Features

        

    
🪟
Frosted Glass
Real backdrop-filter blur effect.

    
🎛️
Full Control
Blur, opacity, border and radius sliders.

    
🌈
Live Preview
Preview on a gradient background like real use cases.

    
📋
Copy CSS
Complete CSS including vendor prefix.

        

      

      

        
How to Use

        
  1. Adjust the background color and opacity.
  2. Set the blur amount with the slider.
  3. Adjust border opacity and border radius.
  4. Copy the generated CSS.

      

      

        
Frequently Asked Questions

        

  
What is glassmorphism?▾
A design trend using semi-transparent backgrounds with backdrop blur to create a frosted glass appearance. Popular in UI design since 2020.

  
Does backdrop-filter work in all browsers?▾
Yes — with the -webkit- prefix for Safari, which is included in the generated CSS. Chrome, Firefox, Edge and Safari all support it.

  
What background is best for glassmorphism?▾
Glassmorphism works best over colorful gradient or image backgrounds. The blur effect needs something behind it to be visible.