How the effect works
The frosted-glass look comes from a single property: backdrop-filter. It doesn't filter the element itself — it filters the pixels behind it. That means two things have to be true at once: its own background must be partially transparent, and there must be something behind it worth filtering. Set the background fully opaque and nothing happens, which makes it easy to conclude the effect isn't working when really there's just nothing to blur. To get closer to the look Apple popularized in its interfaces, pair the blur with saturate(): colors behind the glass lose intensity as they blur, and the extra saturation gives it back.
Readability comes first
The biggest risk with glass cards is accessibility. Text contrast shifts with whatever happens to be behind the card, and white text that reads fine over a dark photo can disappear over a bright one. The safe approach is to give the transparent layer a tint that matches the card itself — a low-opacity black in dark interfaces, a low-opacity white in light ones. Check contrast against the worst-case background the card can sit on, not the average case. A thin inner highlight along the top edge (inset 0 1px 0) sells the sense of physical thickness and helps separate the card from whatever sits behind it.
Support, performance, and pitfalls
backdrop-filter now works in every current browser; prefixing it with -webkit-backdrop-filterfor Safari is still good practice. Where it isn't supported, the background behind the card stays fully transparent, so falling back to something more opaque with @supports not (backdrop-filter: blur(1px)) is worth doing — the generated code below includes that block. The most common pitfall is applying filter to an element that wraps the card somewhere higher up: a filter creates a new containing block, and backdrop-filter on a descendant breaks in ways that are hard to trace back to the cause. Performance is worth watching too — every blurred layer forces the browser to recomposite that part of the screen, and putting glass on every row of a long list slows scrolling in a way that is easy to feel and hard to ignore. Build the background behind the card with the gradient generator if you want to test both layers together.