Der Effekt beruht auf einer einzigen Eigenschaft: backdrop-filter wendet einen Filter auf das an, was hinter einem Element liegt, statt auf das Element selbst. Diesen Hintergrund weichzeichnen, eine teiltransparente Tönung darüberlegen, und die Fläche wirkt wie mattiertes Glas. Der Sättigungsschub ist der Teil, der meist weggelassen wird, und der wichtigste — ohne ihn wird der weichgezeichnete Hintergrund matschig und das Ergebnis sieht nach Nebel aus statt nach Glas.
Die Tönung ist eine Farbe und eine Deckkraft, zu einem rgba-Wert zusammengeführt, und ein zarter heller Rahmen verkauft die Kante der Scheibe. Die eine harte Bedingung ist, dass hinter der Fläche etwas sein muss: Über einer einfarbigen Fläche gibt es nichts weichzuzeichnen und der Effekt bleibt unsichtbar — mit Abstand der häufigste Grund, warum eine kopierte Glassmorphism-Regel nichts zu tun scheint.
Die Kosten, und die sind real
-
Nichts dahinter heißt nichts zum Weichzeichnen:
Das Elternelement braucht ein Bild, einen Verlauf oder überlappenden Inhalt. Auf einfarbigem Grund ist die Fläche nur ein getöntes Rechteck.
-
Der Textkontrast misst sich am weichgezeichneten Hintergrund:
und dieser Hintergrund ändert sich beim Scrollen, eine oben lesbare Überschrift kann also weiter unten durchfallen. Erhöhen Sie die Deckkraft der Tönung, bis auch der schlechteste Fall besteht.
-
Das Zeichnen ist teuer:
backdrop-filter wird neu berechnet, sobald sich dahinter etwas bewegt. Ein paar Flächen sind unkritisch; eine scrollende Liste davon ruckelt auf Mittelklasse-Hardware.
-
Safari brauchte lange das Präfix:
Die präfixierte Eigenschaft wird neben der Standardvariante ausgegeben, und sie wegzulassen ist der andere häufige Grund, warum der Effekt bei manchen funktioniert und bei anderen nicht.
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.