Glassmorphism CSS Generator
Design ToolsFrosted glass card effect in CSS
FreePrivateInstant
Similar tools you may like
History
All history →Glassmorphism CSS Generator — at a glance
Get the modern frosted-glass look for cards and menus without guessing the CSS.
Blur 16px
Opacity 0.25
Run
backdrop-filter: blur(16px);
How to use it — step by step
Set blur, opacity, color and corner radius — the preview updates when you run it.
1
Enter your values
Fill in the boxes. Sensible example values are already filled in for you.
2
Generate Glass CSS
Press the button. The answer is worked out instantly on your device.
3
Read or copy the result
See the big answer and the extra details, then press Copy to keep them.
Pro tips
Small things that make the result better.
✦Glass only looks good on top of a colorful or image background.
✦Keep opacity between 0.1 and 0.4 for the best effect.
✦Always include the -webkit- line for Safari support.
Quick facts
Blurbackdrop-filter
Safariprefix included
Previewon gradient
Freeno signup
Frequently Asked Questions
Why can’t I see the blur on my page?+
The element needs something colorful behind it. A plain white background shows no blur.
Is backdrop-filter supported everywhere?+
It works in all modern browsers. Very old browsers will show the transparent color without blur.
Is my data safe?+
Yes. Everything runs inside your own browser. Your text, files and images are never uploaded to any server.
More Free Tools
Guides you might like
All guides →Color ConverterHEX, RGB and HSL: three ways to write the same colour, and which to usePX to REM Converterpx vs rem: why your font sizes should be allowed to scaleAspect Ratio Calculator16:9, 4:3, 1:1: aspect ratios without cropping surprisesColor Contrast CheckerIs your text readable? The contrast ratio, explained