Glassmorphism CSS generator

Tune the blur, transparency, tint, border, corner radius and saturation, watch the frosted-glass card update live on a colourful background, then copy the CSS. Nothing is uploaded.

Frosted glass Live preview

Backdrop

Blur12px

Transparency15%

Saturation180%

Tint colour

Border

Border visibility40%

Corner radius20px

Shadow depth30

Everything runs in your browser. No upload, no sign-up.

How it works

STEP 1

Move the sliders

Set the blur, transparency, tint colour, border, corner radius and saturation. The glass card updates live as you drag.

STEP 2

Pick a backdrop

Switch the gradient behind the card so you can judge the frosted effect on light, dark and vivid backgrounds.

STEP 3

Copy the CSS

Copy ready-to-paste CSS with backdrop-filter, or download a .css file. Everything is generated on your device.