Glassmorphism Generator
Set a glass tint, blur, opacity and corner radius, and copy the frosted glass card CSS.
Quick answer: enter your details below and click Generate glass CSS — your result appears instantly, right here in your browser. Nothing you enter is uploaded or stored.
G
Developer
Enter your details below.
How to use
- Enter a tint color as a hex value.
- Set the blur, the opacity between 0 and 1, and the corner radius.
- Click Generate glass CSS and copy the rule into your stylesheet.
About this tool
Glassmorphism mimics frosted glass: a translucent panel with a soft blur over whatever sits behind it. Pick a tint color, set the blur strength, the opacity and the corner radius, and this tool writes the card rule. It works best over photos or gradients, where the blur has something interesting to soften.
Frequently asked questions
Why does my glass card look plain on a white page?
The blur only shows when something sits behind the card, so place glass cards over photos, gradients or colorful sections.
What opacity works best?
Values around 0.2 to 0.3 keep text readable while still showing the background. Higher values look more solid and less glass-like.