Wählen Sie filter oder backdrop-filter und passen Sie eine Vorlage über die Regler in der Vorschau an. Kopieren Sie die CSS-Deklarationen für Ihre Seite.
Läuft lokal in deinem BrowserDie Werkbank baut aus acht Funktionen eine einzige filter-Deklaration: Helligkeit, Kontrast, Sättigung, Graustufen, Sepia, Farbton-Drehung, Unschärfe und Deckkraft. Wählen Sie zuerst die Eigenschaft — filter wirkt auf das Element selbst, backdrop-filter auf das, was dahinter liegt — und bewegen Sie dann die Regler, während die Vorschau mitläuft.
Im Exportfeld steht die fertige Deklaration: eine filter-Zeile oder das Paar aus -webkit-backdrop-filter und backdrop-filter, das Safari weiterhin braucht. Kopieren Sie sie in Ihre eigene Regel. Nichts verlässt den Browser, und die Seite arbeitet auch offline.
filter gilt für das Element und alles, was es zeichnet — Kinder und Text eingeschlossen. backdrop-filter lässt das Element selbst unberührt und filtert die Pixel dahinter; deshalb braucht eine Glasfläche einen teilweise transparenten Hintergrund, damit der Effekt überhaupt sichtbar wird.
Die Unterstützung ist nicht identisch: Safari verlangt weiterhin das Präfix -webkit-backdrop-filter, und das Exportfeld schreibt aus diesem Grund beide Zeilen. Unterstützt eine Engine die Eigenschaft nicht, ignoriert sie die Deklaration und das Element erscheint normal — behandeln Sie Glas also als Dekoration, nicht als Struktur.
Jeder Regler entspricht einer CSS-Funktion: Helligkeit, Kontrast und Sättigung nehmen Prozentwerte um den neutralen Wert 100 %; Graustufen, Sepia und Deckkraft laufen von 0 bis 100 %; die Farbton-Drehung nimmt Grad von -360 bis 360; Unschärfe nimmt Pixel in 0,5er-Schritten. Die Reihenfolge ist fest und wird genau so angewendet: hue-rotate(-8deg) vor blur(14px) sieht nicht immer aus wie die umgekehrte Reihenfolge.
Funktionen, die auf ihrem neutralen Wert bleiben, fehlen in der Ausgabe. Die Zeichenkette bleibt trotzdem eine einzige Deklaration, jede Funktion verarbeitet also das Ergebnis der vorherigen und nicht die Originalpixel.
Jedes Feld wird vor dem Schreiben des CSS auf seinen Bereich begrenzt: Helligkeit und Kontrast 0–300, Sättigung 0–500, Graustufen, Sepia und Deckkraft 0–100, Farbton-Drehung -360–360 und Unschärfe 0–40 in 0,5er-Schritten. Wer -5 bei der Unschärfe oder 500 bei den Graustufen eintippt, landet beim Verlassen des Feldes wieder bei 0 und 100; ein leeres Feld nimmt seinen letzten Wert zurück. So bleibt die exportierte Deklaration gültig: Der Browser verwirft den gesamten Filter, sobald eine Funktion einen Wert trägt, den er nicht interpretieren kann.
filter und backdrop-filter werden auf der GPU zusammengesetzt, und Unschärfe ist die teure Funktion: Ein Backdrop-Blur von 14 px über eine große Fläche kann mehr kosten als alles andere zusammen, besonders beim Scrollen. Halten Sie die unscharfe Fläche klein und testen Sie auf dem langsamsten Gerät, das Sie unterstützen.