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.

Share on X LinkedIn

Glass Card

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

Background color

Background opacity15%

Backdrop blur12px

Border radius16px

Border color

Border opacity20%

Border width1px

Box shadow

Shadow intensity20

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);}

Was this tool helpful?

How to use

Set background

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

Adjust blur

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

Tune the border

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

Copy CSS

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