CSS Glass Effect Maker: Why backdrop-filter Needs Two Lines, Not One

The blur that makes a glass panel look like it's actually distorting whatever sits behind it comes from a single CSS property — backdrop-filter. Written alone, it works perfectly in Chrome, Edge, and Firefox. Safari, though, still expects a vendor-prefixed version of the same property to render it at all.

The Two Lines That Always Match

backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);

Both lines need to carry the exact same blur value — a generator writes them together automatically so they can never drift out of sync, which is a genuinely easy mistake to introduce when editing the blur value by hand later and only remembering to update one of the two lines.

Why the Tint Needs Transparency to Work at All

The blur only affects whatever's behind the element — the element's own background still needs enough transparency for that blurred backdrop to actually show through. A fully opaque background defeats the entire effect regardless of how much blur is applied, since there'd be nothing behind it left visible to blur.

background: rgba(255, 255, 255, 0.2);

That 0.2 alpha is doing the real work here — enough tint to read as a distinct panel, but transparent enough that the blurred backdrop still comes through clearly.

Rounding Out the Effect

A border and a shadow finish the look — a light, low-opacity border traces the panel's edge (since a fully transparent background can otherwise look edgeless), and a soft shadow lifts it visually off whatever's behind it:

border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);