backdrop-filter blurs what is behind, not what is inside
That one sentence accounts for nearly every report of glassmorphism "not working".
filter applies to the element and its contents. backdrop-filter applies to whatever is behind it. If the parent is a flat colour, there is nothing to blur, and the panel is simply a tinted rectangle. The effect needs an image, a gradient, or overlapping content underneath it to have anything to work with.
The [msm_tool slug="glassmorphism"] previews against a gradient for exactly that reason — on a white page the effect would appear to do nothing.
Saturation is the part everyone leaves out
Blurring a backdrop averages its colours together, and averaging desaturates. Blur alone produces something closer to fog than to glass: soft, but grey and lifeless.
Adding a saturation boost — typically 150% to 200% — pushes the colour back into the blurred backdrop and is what makes the panel read as translucent material rather than as a smudge. It is the difference between the effect looking deliberate and looking like a mistake, and it is a single extra function in the same declaration.
The four parts
- The blur — usually 8 to 20 pixels. Below that the backdrop stays legible through the panel, which defeats the point; far above it the backdrop becomes an undifferentiated wash.
- The tint — a semi-transparent colour over the blur, typically white at 10–25% on light backdrops, or black at a similar level on dark ones. This is what gives the pane its own presence.
- The saturation — the part above.
- The border — a faint light line, usually white at 20–40%. Real glass catches light at its edge, and without it the panel has no defined boundary.
The contrast problem, stated plainly
Text on a glass panel sits over a blurred version of whatever is behind it, and that backdrop changes as the page scrolls.
A heading that reads perfectly against the dark part of a hero image can drop below the contrast minimum two hundred pixels further down, where the image is bright. Checking it once at the top of the page is not checking it.
The practical fix is to raise the tint opacity until the worst case passes. That reduces the glass effect — which is the honest trade. If the panel needs to be transparent enough to fail contrast, the text does not belong on it.
It is genuinely expensive
backdrop-filter forces the browser to sample and re-blur the content behind the element whenever anything back there moves. On a static panel over a static background that cost is paid once. On a scrolling page it is paid continuously.
Consequences worth knowing:
- A few panels are fine. A scrolling list where every row is a glass card will stutter on mid-range hardware, and noticeably on older phones.
- A sticky glass header over scrolling content is one of the more expensive things you can build, because the backdrop is changing constantly by definition.
- Battery cost on mobile is real and not something the user can attribute to your page.
Safari and the prefix
Safari required -webkit-backdrop-filter for a long time, and it is still worth emitting both. Dropping the prefixed line is the other common reason the effect works for some visitors and not others — and because it fails silently to a plain tinted rectangle, nobody reports it as broken.
When to use it, and when not
Glass works where it is doing a job: a navigation bar that needs to sit above content without hiding it, a modal that should keep its context visible, an overlay on a photograph.
It works badly as decoration on a plain page, where there is nothing to blur, and badly on anything that must be read carefully, because the backdrop is competing with the text by design. If in doubt, a solid panel at 95% opacity gives most of the layering and none of the cost.