How this tool works
The effect is one property doing the work: backdrop-filter applies a filter to whatever is behind an element rather than to the element itself. Blur that background, lay a partly transparent tint over it, and the panel reads as frosted glass. The saturation boost is the part usually left out and the part that matters most — without it the blurred backdrop turns muddy and the result looks like fog rather than glass.
The tint is a colour and an opacity combined into an rgba value, and a faint light border sells the edge of the pane. The one hard requirement is that something has to be behind the panel: over a flat colour there is nothing to blur and the effect is invisible, which is far and away the commonest reason a copied glassmorphism rule appears to do nothing.
The costs, which are real
- Nothing behind it means nothing to blur: the parent needs an image, a gradient or overlapping content. On a plain background the panel is just a tinted rectangle.
- Text contrast is measured against the blurred backdrop: and that backdrop changes as the page scrolls, so a heading readable at the top may fail further down. Raise the tint opacity until the worst case passes.
- It is expensive to paint: backdrop-filter is recalculated whenever anything behind it moves. A few panels are fine; a scrolling list of them will stutter on mid-range hardware.
- Safari has needed the prefix for a long time: the prefixed property is emitted alongside the standard one, and dropping it is the other common reason the effect fails for some visitors and not others.