CSSAwwwards
+ Submit tool
Built-in toolFree · No signup

CSS Glassmorphism Generator

Build frosted-glass UI components visually. Adjust background opacity, backdrop blur, border transparency, border radius, and shadow intensity — with a vivid gradient preview so you can see the effect instantly.

Glass Card

Glassmorphism with live preview. Adjust the controls to see changes in real time.

Background color

15%
12px
16px

Border color

20%
1px
20
CSS Output
.glass {  background: rgba(255, 255, 255, 0.15);  backdrop-filter: blur(12px);  -webkit-backdrop-filter: blur(12px);  border: 1px solid rgba(255, 255, 255, 0.20);  border-radius: 16px;  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.20);}

How to use

01

Set background

Pick a background colour and opacity. Lower opacity (10–25%) gives the most realistic glass look.

02

Adjust blur

Increase backdrop-filter blur (8–20px) to create the frosted glass effect.

03

Tune the border

A subtle white border at 15–30% opacity adds depth and realism to the glass card.

04

Copy CSS

Hit Copy CSS to get the complete glass effect CSS including webkit prefix, ready to paste.

More CSS generator tools

From our directory of 30+ CSS tools.

Browse all →

Know a great CSS tool?

Submit it to the directory and help developers discover it.

Submit a tool →