Does backdrop-filter work in all browsers?

All modern browsers support it. Safari still wants the -webkit- prefix, so include both.

Why does my glass effect look invisible?

There's nothing behind it to blur. Put the element over a gradient or image background.

Glassmorphism in CSS: the frosted-glass effect

Glassmorphism is three CSS properties working together: a translucent background, a backdrop blur, and a faint border to catch the light. Here's the recipe.

Open Glassmorphism Generator

The core recipe

.glass { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 16px; }

backdrop-filter blurs whatever is behind the element — so the effect is only visible over a colorful or image background. Over flat white, glass looks like nothing.

Tuning it

More blur (16–24px) = frostier; less (6–8px) = subtler and better for text legibility.
Background alpha 0.05–0.15 for dark themes, 0.4–0.7 for light themes.
Add a soft box-shadow (0 8px 32px rgba(0,0,0,0.12)) to lift the panel off the page.
Check text contrast — translucent panels over busy backgrounds easily fail WCAG.

Tools used in this guide

Glassmorphism GeneratorFrosted-glass CSS in seconds CSS Gradient GeneratorBuild CSS gradients visually Box Shadow GeneratorDesign CSS box shadows visually