backdrop-filter in CSS: Milchglas, das schnell bleibt

Ein backdrop-filter in CSS wendet einen grafischen Effekt, meist Unschärfe, auf alles an, was hinter einem Element liegt. Schreib backdrop-filter: blur(12px) an ein Element mit teilweise transparentem Hintergrund, und die Seite darunter wird weich: der Milchglas-Look von Navigationsleisten, Sheets und Karten. Jeder aktuelle Browser unterstützt ihn. Die Kunst liegt darin, die unscharfe Fläche klein, den Radius maßvoll und den Fallback lesbar zu halten.

Das Grundrezept für Milchglas

Drei Dinge machen Glas aus: eine durchscheinende Füllung, damit der Hintergrund sichtbar ist, die Unschärfe selbst und eine feine Kante, damit das Panel eine Form hat. Die meisten ergänzen auch eine kleine Sättigungsanhebung, weil Unschärfe Farben mittelt und sie grauer lässt, als man erwartet.

.glass {
  background: rgb(255 255 255 / 0.14);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 16px;
}

Glas sieht nur wie Glas aus, wenn dahinter etwas liegt, das sich zu verwischen lohnt. Auf einer flachen grauen Seite wirkt das Panel nur trüb. Leg es über ein Foto oder einen satten Verlauf, wie Glassmorphism ausführlicher erklärt.

Was backdrop-filter-Funktionen können

Die Eigenschaft akzeptiert dieselben Funktionen wie filter, und du kannst sie in einer Deklaration verketten. Sie wirken der Reihe nach von links nach rechts, daher verhält sich blur() vor saturate() anders als umgekehrt. Die vollständige Liste steht bei MDN.

Performance von backdrop-filter

Unschärfe gehört zu den teureren Dingen, die ein Browser zeichnet. Um einen Bereich unscharf zu machen, muss er jedes Pixel hinter dem Element lesen, die Nachbarn bis zum Radius abtasten und das Ergebnis zusammensetzen, und er wiederholt diese Arbeit, sobald sich hinter dem Panel etwas ändert. Ein Sticky Header über einer scrollenden Seite zeichnet seine Unschärfe in jedem Frame des Scrollens neu.

Die Kosten hängen an zwei Zahlen, die du steuerst: der Fläche des Elements und dem Radius. Ein 64 Pixel hoher Header mit 12px Unschärfe ist auf fast allem günstig. Ein bildschirmfüllendes Overlay mit 40px Unschärfe über einem Video kann auf einem Mittelklasse-Smartphone Frames verlieren. Das größere Bild steht in Performance von CSS-Verläufen.

Warum backdrop-filter nicht funktioniert

Wenn die Unschärfe scheinbar nichts tut, liegt die Ursache fast immer in einer kurzen Liste.

1. 1

   Prüf, ob der Hintergrund durchsichtig ist

   Ein deckendes background: #fff verdeckt den unscharfen Hintergrund vollständig. Nutze einen Alphawert wie rgb(255 255 255 / 0.15).

2. 2

   Ergänze das Safari-Präfix

   Safari akzeptiert die Eigenschaft ohne Präfix erst ab Version 18. Ältere iPhones brauchen weiterhin -webkit-backdrop-filter.

3. 3

   Such nach einer Backdrop Root darüber

   Ein Elternelement mit filter, opacity unter 1, einer Maske oder eigenem backdrop-filter begrenzt, was das Kind sehen kann. Das Kind macht dann nur dieses Elternelement unscharf, was oft wie gar keine Unschärfe aussieht.

4. 4

   Achte auf fixierte Kinder

   Wie filter macht ein backdrop-filter das Element zum Containing Block für fixierte und absolut positionierte Kinder. Ein fixiertes Menü in einem Glas-Header richtet sich dann am Header aus, nicht am Fenster.

5. 5

   Sorg dafür, dass etwas dahinter liegt

   Unschärfe über einer flachen Farbe ist unsichtbar. Scroll das Panel über ein Bild, um zu prüfen, ob es funktioniert.

Ein Fallback, der Text lesbar hält

Durchscheinende Panels sind um die Unschärfe herum gestaltet. Ohne sie lässt eine weiße Füllung mit 14 Prozent über einem unruhigen Foto den Text direkt auf dem Foto stehen, und der Kontrast bricht ein. Schreib zuerst die lesbare Version und rüste sie dort auf, wo der Browser unscharf zeichnen kann.

/* Works everywhere: opaque enough to read on its own */
.glass {
  background: rgb(15 23 42 / 0.86);
  color: #f8fafc;
}

/* Upgrade where blur is available */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgb(15 23 42 / 0.45);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
}

/* Respect people who ask for less transparency, where supported */
@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: rgb(15 23 42 / 0.94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

Prüf den Kontrast an der schlechtesten Stelle hinter dem Panel, nicht am Durchschnitt. Eine weiße Überschrift über Glas, das über einen hellen Himmel gleitet, kann weit unter die Verhältnisse aus Farbkontrast und Barrierefreiheit fallen. Abdunkeln mit brightness(0.7) löst das meist zuverlässiger als stärkere Unschärfe.

Wann du gar keine Unschärfe brauchst

Viel Milchglas existiert nur, um Worte über einem unruhigen Hintergrund lesbar zu machen. Wenn du den Hintergrund selbst gestaltest, löst ein ruhigerer das Problem ganz ohne Renderkosten. Ein weicher, kontrastarmer Verlauf hinter einem Hero braucht kein Panel; siehe Website-Hero-Hintergründe und unscharfe Hintergründe, wo die Unschärfe einmal ins Bild eingebacken wird, statt in jedem Frame berechnet zu werden.

Der zweite Ansatz ist, wie Gradiently Lesbarkeit löst: Ein Mark weiß, wo die Worte stehen, und schiebt seine ruhigste, kontrastreichste Fläche hinter sie, sodass du nie einen Kasten oder eine Unschärfe brauchst, um eine Überschrift zu retten.