Um auf dieser Website die gestalterischen Möglichkeiten voll auszuschöpfen, optimiere und generiere ich einige der grafischen Darstellungen mit Hilfe künstlicher Intelligenz - sie zeigen, was technisch machbar ist.
Schaltet die animierte Startseite in eine ruhige, zugängliche Ansicht (normales Scrollen, weniger Animationen). Diese Unterseiten sind bereits zugänglich aufgebaut. (Seite lädt neu)
Liquid Glass im Web: die Physik, die Chromium-Fallen und ein Labor zum Mitspielen
Apples Glas-Effekt sieht in jedem Tutorial nach zehn Zeilen CSS aus. Ich habe ihn für meine eigene Website gebaut und dabei drei Dinge gefunden, die kein Tutorial erwähnt und die den Effekt in Chromium still kaputt machen. Hier steht alles, was ich dabei gelernt habe, mit Reglern zum Selbstprobieren.
Alles auf dieser Seite ist live. Wenn du unten die Regler bewegst, ändert sich auch die Navigation oben, es ist derselbe Code.
Refraktion ist nicht Blur
Frosted Glass streut Licht, ein Weichzeichner hinter einer halbtransparenten Fläche, fertig. Liquid Glass bricht Licht. An einer gekrümmten Kante ändert der Lichtstrahl seine Richtung, der Hintergrund erscheint dort verschoben, gestreckt und an der stärksten Krümmung sogar auf dem Kopf.
Der Unterschied fällt erst auf, wenn etwas hinter dem Glas vorbeiläuft. Schieb den Text mit dem Regler durch beide Flächen und schau auf die Ränder.
Schieb mich durch das GlasRefraktionkleine Schrift zeigt es am deutlichsten
Nur Blurbackdrop-filter: blur()
Echte Brechungbackdrop-filter: url()
Drei Chromium-Wahrheiten, die kein Tutorial nennt
Der Effekt läuft über einen SVG-Filter, der als backdrop-filter am Element hängt. Eine Displacement-Map sagt jedem Pixel, wie weit er verschoben wird. Klingt einfach. In der Praxis bin ich in drei Fallen gelaufen, die alle dasselbe Symptom haben, es sieht irgendwie glasig aus, ist aber physikalisch falsch.
Eine Map mit Alpha 0 ist tot
Damit die Map nicht sichtbar über dem Element klebt, exportiert man sie gern mit Alpha 0. Genau das killt sie. Skia multipliziert beim Dekodieren die Farbkanäle mit dem Alpha-Wert, bei Alpha 0 bleibt überall Null übrig. Der Filter verschiebt dann alles um einen konstanten Betrag schräg nach oben links. Mit etwas Blur darüber sieht das täuschend nach Brechung aus, ist aber nur ein Versatz. Richtig ist Alpha 255 plus ein Filter-Graph, dessen letzter Schritt die Map nicht ausgibt.
Der Hintergrund endet an der Elementkante
Chromium schneidet das Backdrop exakt auf die Fläche des Elements zu. Was daneben liegt, bekommst du nie zu sehen, egal wie weit du abtastest. Alles jenseits der Kante wird an der Kante gespiegelt. Das ist keine Einschränkung, sondern der Trick: Wer bewusst über die Kante hinaus abtastet, holt sich den Inhalt von innen gespiegelt zurück, und genau das ist die Überkopf-Optik, die man von echtem Glas kennt.
Filter werden am Namen gecacht
Tauscht du die Filter-Definition unter derselben ID aus, rendert Chromium munter mit der alten weiter. Ich habe eine Weile Werte gesucht, die längst richtig waren und nur nie ankamen. Seitdem bekommt jeder Rebuild eine neue ID.
Das Profil: warum eine gerade Rampe falsch aussieht
Die naheliegende Lösung ist eine lineare Rampe, am Rand viel Verschiebung, zur Mitte hin weniger. Das Ergebnis wirkt wie eine schräg verschobene Kopie, nicht wie Glas. Eine echte Linse dehnt nämlich nicht gleichmäßig. Zur Faltkante hin wird die Streckung immer stärker, bis das Bild dort umklappt. Das ist dieselbe Kaustik, die du bei einem Wassertropfen auf einer Scheibe siehst.
Ich beschreibe deshalb nicht die Verschiebung selbst, sondern die Quellposition als weiche Kurve mit zwei Zonen. Außen liest sie hinter die Kante, das gibt das gespiegelte Band. Am Umklapp-Punkt ist die Streckung am größten. Danach läuft sie sanft aus, bis in der Mitte wieder eins zu eins gilt. Die Kurve ist streng monoton, deshalb verschwindet nirgendwo Inhalt.
Von der Außenkante zur Mitte: gespiegeltes Band, Faltkante, gestauchte Zone, klare Mitte.
Das Labor
Hier sind alle Parameter, mit denen ich den Effekt eingestellt habe. Die Werte wirken auf die Pille darunter und auf die Navigation oben. Zieh die Regler, schieb den Hintergrund durch und schau, was passiert.
Schieb mich durch das GlasRefraktionkleine Schrift zeigt es am deutlichsten
EMITLiquid Glass
Was noch dazugehört
Der Rand löst den Inhalt auf
Kleine Schrift, die unter eine Glasleiste scrollt, flimmert an der Kante. Apple löst das nicht geometrisch, sondern mit einer eigenen Ebene, die den Inhalt vorher weich auflöst. Auf dieser Seite läuft dieselbe Ebene unter der Navigation mit.
Es leuchtet von innen
Bei Berührung leuchtet das Material dort auf, wo der Finger sitzt, und strahlt schwach auf benachbarte Glasflächen ab. Fahr mit der Maus über die Pille im Labor, dann siehst du es.
Erscheinen ohne Überblenden
Glas blendet bei Apple nie mit Transparenz ein. Stattdessen wird die Brechung hochgefahren, das Element materialisiert sich. Kostet nichts, weil dafür nur ein einziges Attribut animiert wird.
Farbe bleibt Glas
Ein voll deckender Button auf Glas bricht die Illusion sofort. Getönte Flächen bleiben durchsichtig und passen ihre Helligkeit an den Hintergrund an. Der blaue Button oben in der Navigation ist genau so gebaut.
Die Browser-Realität
Echte Brechung im backdrop-filter läuft nur in Chromium, also Chrome, Edge und Brave. Safari und iOS unterstützen SVG-Filter an dieser Stelle nicht, das ist ein bekannter offener WebKit-Bug und keine Frage der richtigen Syntax.
Auf dem iPhone läuft deshalb eine zweite Variante, klare Mitte plus ein dunkler, weich auslaufender Rand mit eigenem Hintergrundfilter. Das ist keine Brechung, hat aber dieselbe Silhouette und fällt im direkten Vergleich kaum auf.
Barrierefreiheit gehört dazu, nicht als Anhang. Wer im System reduzierte Transparenz eingestellt hat, bekommt eine deckende Fläche. Bei erhöhtem Kontrast wird aus dem Glas eine ruhige Fläche mit klarer Kontur, und bei reduzierter Bewegung stehen Lichtwanderung und Leuchten still. Den Textkontrast misst man nach dem Weichzeichnen, nicht davor.
Häufige Fragen
Warum sieht meine Displacement-Map aus wie Brechung, verzerrt aber nichts richtig?
Vermutlich hat die Map einen Alpha-Kanal von 0. Chromium multipliziert beim Dekodieren die Farbkanäle mit dem Alpha-Wert, bei Alpha 0 bleiben überall Nullen übrig. Der Filter verschiebt dann alles um einen konstanten Betrag diagonal, was mit etwas Unschärfe nach Brechung aussieht, aber keine ist. Richtig ist Alpha 255 in Kombination mit einem Filter-Graph, dessen letzter Schritt die Map nicht ausgibt.
Kann Liquid Glass Inhalte spiegeln, die neben dem Element liegen?
Nein. Chromium schneidet das Backdrop exakt auf die Fläche des Elements zu, alles außerhalb ist über backdrop-filter nicht erreichbar. Samples jenseits der Kante werden an der Kante gespiegelt. Genau dieses Verhalten liefert aber die Überkopf-Optik, wenn man bewusst über die Kante hinaus abtastet.
Warum wirken meine Parameter-Änderungen nicht?
Chromium cacht Filter-Definitionen anhand der ID. Ersetzt man das Filter-Element unter derselben ID, wird weiter mit der alten Definition gerendert. Die Lösung ist, bei jedem Rebuild eine neue ID zu vergeben und den backdrop-filter-Wert entsprechend zu aktualisieren.
Läuft der Effekt auf dem iPhone?
Die echte Brechung nicht. Safari und iOS unterstützen SVG-Filter im backdrop-filter nicht, das ist ein offener WebKit-Bug. Sinnvoll ist dort eine zweite Variante mit klarer Mitte und einem dunklen, weich auslaufenden Rand mit eigenem Hintergrundfilter. Die Silhouette bleibt gleich, der Unterschied fällt im Alltag kaum auf.
Ist Liquid Glass barrierefrei?
Nur mit Sorgfalt. Der Textkontrast muss nach dem Weichzeichnen gemessen werden, nicht davor. Außerdem gehören drei Systemeinstellungen respektiert: reduzierte Transparenz ergibt eine deckende Fläche, erhöhter Kontrast eine ruhige Fläche mit klarer Kontur und reduzierte Bewegung schaltet Lichtwanderung und Leuchten ab.
Lohnt sich das für eine normale Website?
Für die meisten Seiten reicht ein gutes Frosted Glass, und das ist auch die ehrlichere Antwort. Der Aufwand hier steckt in der Navigationsebene, also in Leisten, schwebenden Buttons und Overlays, genau da, wo Apple ihn auch zulässt. Im Inhalt hat der Effekt nichts verloren, er frisst Rechenzeit und kostet Lesbarkeit.
Wenn du so etwas für dein Projekt willst oder dich einfach interessiert, wie weit man Browser treiben kann, meld dich gerne bei mir.
Die physikalische Grundlage stammt aus dem Artikel von kube.io über Refraktion mit CSS und SVG sowie aus Apples WWDC-Material zum Material selbst. Die Chromium-Befunde auf dieser Seite habe ich selbst gemessen, mit einem Farbstreifen-Lineal hinter dem Glas und Screenshots in Pixelschritten.