Glassmorphism generator that survives a real backdrop

Almost always because an ancestor has started its own backdrop root. Any element up the tree carrying a filter, an opacity below 1, a transform, a mask or will-change begins a new group, and backdrop-filter can only sample what is painted inside the group it belongs to — so a pane inside a fading modal blurs that modal's empty backdrop and comes out flat. The two other causes are an opaque background on the pane itself, which simply covers the blurred result, and nothing being painted behind the pane in the first place.

Yes, if Safari 17 or older is in your support matrix. WebKit shipped the property as -webkit-backdrop-filter back in Safari 9 and only dropped the prefix in Safari 18, and iOS devices below 18 are still a measurable slice of mobile traffic. Chrome has been unprefixed since 76 and Firefox since 103, so for them the prefixed line is dead weight — harmless dead weight, since the unprefixed declaration follows it and wins wherever both are understood.

Because blurring averages neighboring pixels, and averaging colors drags them toward grey. A 16px blur over a saturated photograph can visibly cut the chroma, which is why every recognizable frosted recipe pairs the blur with saturate() at 150% to 180% rather than using blur alone. The hairline stroke matters as much: a white border at roughly 35% opacity along the lit edge is what makes the pane read as a physical sheet instead of a translucent rectangle.

It costs a repaint of everything underneath the element on every frame in which anything moves. A 320 by 200 pane is free in practice; a full-width sticky header with a blur is the version that drops frames on mid-range Android, because the compositor re-blurs the entire strip on each scroll tick. Animating the blur radius is the worst case of all — transition opacity or transform instead and leave the radius alone.

That is a long-standing WebKit clipping bug: a rounded parent with overflow hidden does not reliably clip a child's backdrop-filter, so the filtered rectangle pokes out at the corners. Put the border-radius on the same element that carries the filter rather than on a wrapper around it; where the markup will not allow that, giving the clipping parent isolation: isolate or transform: translateZ(0) forces it onto its own compositing layer and the clip starts working.

No — backdrop-filter only touches pixels painted behind the element, never the element's own background. To blur the image itself, put it on a pseudo-element or a child and apply the ordinary filter property there, keeping the text in a sibling above it. Reaching for filter on the pane you want sharp is the usual version of this mistake, and it blurs the text along with everything else.

Score the label against the tint composited over pure white and over pure black, then design for the lower of the two numbers. A ratio measured against one screenshot tells you nothing about what happens when the visitor scrolls a photograph underneath, and this page reports both extremes for exactly that reason. When the floor falls short of 4.5:1, the repairs in ascending order of damage to the look are: raise the tint opacity, shift the tint away from the label's lightness, or drop a small solid scrim behind the text alone.