How to Create a Glassmorphism Card with CSS
Frosted glass cards pair a translucent fill with a backdrop blur. This guide covers tint, blur, opacity and radius for a clean glass effect.
What is the Glassmorphism Generator?
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.
How to use it
- 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.
Worked example
With a #ffffff tint, blur 12, opacity 0.25 and a 16px radius, the result is a .glass rule with background rgba(255, 255, 255, 0.25), a 12px backdrop blur, a translucent border and a 16px radius.
Does backdrop-filter work everywhere?
It works in modern browsers, but older ones may ignore the blur and show only the translucent fill. Keep the fill opaque enough that text stays readable without the blur.
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.