Was ist der Unterschied zwischen Glassmorphism und Liquid Glass?

Glassmorphism (Frosted Glass) streut Licht: ein Weichzeichner hinter einer halbtransparenten Fläche. Liquid Glass bricht Licht: Der Hintergrund wird an den gekrümmten Rändern verschoben, als würde man durch eine echte Glaslinse schauen. Der sichtbarste Unterschied ist die helle Glanzkante am Rand und die Verzerrung des Hintergrunds direkt an der Kante, während die Mitte klar bleibt.

Funktioniert Liquid Glass in allen Browsern?

Nein. Die echte Brechung über einen SVG-Filter im backdrop-filter läuft nur in Chromium-Browsern (Chrome, Edge, Brave). Safari und iOS unterstützen SVG-Filter als backdrop-filter nicht, aus GPU-Stabilitätsgründen. Dort greift ein Fallback auf reines blur() mit erhöhter Sättigung. Die Glanzkante und der große Eckenradius funktionieren überall.

Warum wird meine Displacement-Map als graues Bild sichtbar?

Weil Chromium eine per feImage geladene Bilddatei in einem backdrop-filter zusätzlich als sichtbaren Layer über das Element malt, statt sie nur als Verschiebungsquelle zu nutzen. Der Fix: Die Map mit einem Alpha-Kanal von 0 exportieren. feDisplacementMap liest nur die Rot- und Grün-Werte für die Verschiebung, der sichtbare Teil des Bildes wird durch Alpha 0 unsichtbar.

Sollte ich Liquid Glass auf meiner Website einsetzen?

In den meisten Fällen sparsam bis gar nicht. Apple selbst beschränkt den Effekt auf die Navigations- und Overlay-Ebene und warnt davor, ihn im Inhalt zu verwenden. Auf einer normalen Firmen-Website kostet er Rechenleistung, gefährdet die Lesbarkeit und rendert auf iPhones nur als schlichter Blur. Als dezentes Detail auf einer Bar oder einem schwebenden Button kann er sich lohnen, als flächiger Look selten.

Ist Liquid Glass barrierefrei?

Nur mit Sorgfalt. Der Kontrast von Text auf dem Glas muss NACH dem Weichzeichnen gemessen werden, nicht davor - über unruhigen Hintergründen kippt er leicht unter die WCAG-Grenze von 4,5:1. Zusätzlich müssen prefers-reduced-transparency und prefers-reduced-motion respektiert werden: Wer im System reduzierte Transparenz eingestellt hat, soll eine deckende Fläche sehen, keinen Glas-Effekt.

Apples Liquid Glass in CSS nachbauen: die Physik, der Code und die Stolperfallen

Apples Liquid Glass ist der Effekt, den 2025 plötzlich jeder im Web haben wollte. Halbtransparente Bars und Buttons, die den Hintergrund nicht nur verwischen, sondern ihn an den Rändern brechen wie echtes Glas. Es sieht teuer aus, und der Reflex ist verständlich: kurz nachbauen, fertig.

Ich habe genau das getan und dabei jede Falle mitgenommen, die es gibt. Dieser Beitrag ist die Anleitung, die ich mir vorher gewünscht hätte: erst die Physik, dann der lauffähige Code, dann die Bugs, die in keinem der glänzenden Tutorials stehen. Und am Ende die ehrliche Frage, ob man das auf einer echten Kundenseite überhaupt will.

Refraktion, nicht Blur: warum Liquid Glass anders ist

Der klassische Glassmorphism-Look ist schnell erklärt: eine halbtransparente Fläche, dahinter ein backdrop-filter: blur(). Das Licht des Hintergrunds wird gestreut, alles wird milchig. Frosted Glass eben.

Liquid Glass macht etwas anderes. Echtes Glas streut Licht nicht nur, es bricht es. An einer gekrümmten Kante ändert der Lichtstrahl seine Richtung, der Hintergrund erscheint dort verschoben und verzerrt. Physikalisch beschreibt das das Snellsche Gesetz: Der Winkel, in dem ein Strahl gebrochen wird, hängt vom Brechungsindex und von der Neigung der Oberfläche ab. In der Mitte einer flachen Glasscheibe passiert fast nichts, an der gekrümmten Randzone dagegen viel.

Genau das ist der Kern von Liquid Glass, und es sind vier Eigenschaften, die es von simplem Blur trennen:

Refraktion an den Rändern. Der Hintergrund wird an den Kanten gebogen, die Mitte bleibt klar.
Eine helle Glanzkante (Specular Highlight) am Rand - der sichtbarste Unterschied zu reinem Blur.
Tiefe durch Schatten und eine leichte Innenbeleuchtung.
Optional chromatische Aberration, feine Farbsäume an der Kante, wie bei einer echten Linse.

Wer nur blur() einsetzt, bekommt Frosted Glass. Für die Brechung braucht es mehr: eine SVG-Displacement-Map.

Der Teil, der überall funktioniert: das CSS-Gerüst

Bevor die Brechung ins Spiel kommt, steht das Gerüst - und das läuft in jedem modernen Browser. Ein großer Eckenradius, ein zurückhaltender Blur mit erhöhter Sättigung (sonst wird das Glas grau statt lebendig), eine feine helle Kante als Glanz und ein Schatten für die Tiefe.

.liquid-glass {
  position: relative;
  isolation: isolate;
  border-radius: 28px;                 /* großer Radius ist Pflicht */
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(2px) saturate(180%) brightness(1.08);
  backdrop-filter: blur(2px) saturate(180%) brightness(1.08);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 1px 1px 1px rgba(255, 255, 255, 0.6),   /* obere Glanzkante */
    inset -1px -1px 1px rgba(255, 255, 255, 0.15),
    0 18px 50px rgba(0, 0, 0, 0.4);               /* Tiefe */
}

Das saturate(180%) ist wichtiger, als es aussieht: Ohne die Sättigungsanhebung wirkt jedes Backdrop-Glas stumpf und gräulich. Damit steht schon ein solides Frosted Glass. Für den echten Liquid-Effekt fehlt jetzt die Brechung.

Die Brechung: SVG-Displacement-Map

feDisplacementMap ist ein SVG-Filter, der jeden Pixel des Hintergrunds verschiebt - und zwar so weit, wie es ihm eine zweite Grafik vorgibt, die Displacement-Map. In dieser Map steckt die Verschiebung in den Farbkanälen: Der Rot-Wert steuert die horizontale, der Grün-Wert die vertikale Verschiebung. Ein neutrales Grau (128, 128) bedeutet keine Verschiebung, Abweichungen davon schieben den Hintergrund in eine Richtung.

Für Liquid Glass will man eine Map, die genau das nachbildet, was echtes Glas tut: in der Mitte flach (neutrales Grau, keine Brechung), an den Rändern eine Verschiebung nach außen. Erzeugt man diese Map aus der Signed Distance Function eines abgerundeten Rechtecks und nimmt deren Gradient als Oberflächen-Normale, bekommt man exakt das Bezel-Profil einer Glaskante.

Die Displacement-Map: neutrales Grau in der Mitte, an den Rändern kodiert die Farbe die Verschiebungsrichtung nach außen.

So sieht diese Map aus: grau in der Mitte, an den Rändern rot nach rechts, cyan nach links, blau nach oben, grün nach unten. Genau dieses Muster erzeugt die 360-Grad-Brechung an der Kante. Eingebunden wird sie über feImage, angesteuert per backdrop-filter:

<svg width="0" height="0" aria-hidden="true" style="position:absolute">
  <filter id="lg" x="-0.25" y="-0.25" width="1.5" height="1.5"
          primitiveUnits="objectBoundingBox"
          color-interpolation-filters="sRGB">
    <feImage href="data:image/png;base64,..." preserveAspectRatio="none"
             x="0" y="0" width="1" height="1" result="map"/>
    <feDisplacementMap in="SourceGraphic" in2="map" scale="0.15"
                       xChannelSelector="R" yChannelSelector="G"/>
  </filter>
</svg>

@supports (backdrop-filter: url(#lg)) {
  .liquid-glass {
    backdrop-filter: url(#lg) blur(2px) saturate(180%) brightness(1.08);
  }
}

Das @supports ist kein Schmuck: Es sorgt dafür, dass nur Browser, die den SVG-Filter im Backdrop können, die Brechung bekommen - alle anderen bleiben beim sauberen Frost aus dem CSS-Gerüst.

Wer keine Map generieren will, kommt mit feTurbulence als Displacement-Quelle zu einem schnellen, organischen Verzerrungs-Look. Der sieht eher wässrig als glasig aus, ist aber ein Einzeiler und ein guter Startpunkt. Der saubere Kanten-Look kommt erst mit der Bezel-Map.

Die Stolperfallen, die kein Tutorial nennt

Hier wird es interessant, denn genau an diesen Stellen bin ich hängengeblieben - und die glänzenden Demo-Videos schweigen dazu.

1. Die Displacement-Map wird als graues Bild sichtbar

Der teuerste Bug. Man bindet die Map per feImage ein, und statt der Brechung sieht man das graue Map-Bild mit seinen bunten Rändern direkt über dem Element liegen. Der Effekt ist komplett kaputt.

Vier Filter-Varianten im Vergleich: Turbulence (A) und die Alpha-0-Map (D) funktionieren, die beiden feImage-Varianten mit sichtbarem Alpha (B, C) rendern die Map als graues Bild durch.

Der Grund: Chromium malt eine per feImage geladene Bilddatei in einem backdrop-filter zusätzlich als sichtbaren Layer, statt sie ausschließlich als Verschiebungsquelle für feDisplacementMap zu behandeln. Ob man die Map in objectBoundingBox-Einheiten oder in absoluten Pixeln einbindet, ändert daran nichts - beide Varianten zeigen den Fehler.

Der Fix ist unscheinbar und steht in keiner Anleitung: Die Map mit einem Alpha-Kanal von 0 exportieren. feDisplacementMap liest für die Verschiebung nur die Rot- und Grün-Werte, der Alpha-Kanal ist ihm egal. Für die Sichtbarkeit dagegen zählt Alpha - und bei 0 ist das Bild unsichtbar. Verschiebung funktioniert, Bild verschwindet. In der Vergleichsgrafik ist das Variante D, die einzige feImage-Version, die sauber rendert.

2. Die Brechung wirkt nur unten und rechts

Ein zweiter Klassiker: Der Effekt greift nur an der rechten und unteren Kante, oben und links passiert nichts. Ursache sind Prozent-Maße an der feImage (x="0%" width="100%"), mit denen Chromium die Map falsch auf das Element mappt. Die Lösung ist, entweder in objectBoundingBox-Einheiten zu arbeiten (ein Filter für alle Elementgrößen) oder die Map in absoluten Pixeln passend zur Elementgröße zu setzen. Verifizieren sollte man das immer über einem feinen Gitter mit einem großen Element - bei kleinen Testflächen fällt die Asymmetrie kaum auf.

3. transform verzerrt die Brechung

Sobald ein Element mit Backdrop-Refraktion per transform: scale() oder rotate() animiert wird, verzerrt sich der Koordinatenraum des Filters und die Brechung wird schief. Reines translate ist sicher. Form-Animationen wie das typische “Wobbeln” von Liquid Glass laufen deshalb besser über border-radius-Morphing als über scale.

4. iOS und Safari brechen gar nicht

Der Punkt, der einen ganzen Ansatz kippen kann: Safari und iOS unterstützen SVG-Filter als backdrop-filter schlicht nicht, aus GPU-Stabilitätsgründen. Es gibt keinen Weg, echte Backdrop-Refraktion auf dem iPhone zu erzwingen - Apples eigenes Glas ist nativ in Metal gebaut, nicht im offenen Web verfügbar. Wer die Brechung dort trotzdem will, muss den Hintergrund duplizieren und filter statt backdrop-filter auf die Kopie legen, was bei bewegten Hintergründen auf Mobilgeräten praktisch nicht tragbar ist. Der pragmatische Weg: iOS bekommt den Frost-Fallback, sauber getunt mit etwas mehr Sättigung und Deckkraft, und Chromium bekommt die echte Brechung. Das @supports von oben erledigt genau diese Trennung.

Barrierefreiheit ist hier kein Anhängsel

Glas-Effekte kollidieren schneller mit Barrierefreiheit als fast jedes andere UI-Muster. Drei Dinge sind Pflicht:

Kontrast nach dem Blur messen, nicht davor. Text auf Glas kann über einem ruhigen Hintergrund gut lesbar sein und über einem unruhigen unter die WCAG-Grenze von 4,5:1 kippen. Gemessen wird der Endzustand.
prefers-reduced-transparency respektieren. Wer im System reduzierte Transparenz eingestellt hat, soll eine deckende Fläche sehen statt eines Glas-Effekts. Das sind ein paar Zeilen CSS, aber sie entscheiden über Nutzbarkeit für einen realen Teil der Besucher.
Nicht stapeln. Glas auf Glas wird unlesbar. Eine Glas-Fläche pro Ansicht.

@media (prefers-reduced-transparency: reduce) {
  .liquid-glass { background: #0f172a; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

Und jetzt ehrlich: brauchst du das?

Der Code funktioniert, der Effekt sieht gut aus - trotzdem ist die wichtigste Frage nicht “wie”, sondern “ob”. Apple selbst gibt die Antwort ziemlich klar vor. In den eigenen Design-Richtlinien gehört Liquid Glass auf die Navigations- und Overlay-Ebene: Bars, schwebende Buttons, Sheets. Ausdrücklich nicht in den Inhalt, nicht auf Listen, Tabellen oder Textflächen. Und Transluzenz soll funktional sein, den darunterliegenden Kontext durchscheinen lassen, nicht Dekoration.

Für eine normale Firmen-Website heißt das: Als flächiger Look ist Liquid Glass fast immer die falsche Wahl. Er kostet Rechenleistung, er gefährdet die Lesbarkeit, und auf dem iPhone - also bei der Mehrheit der Besucher - rendert er ohnehin nur als schlichter Blur. Der ganze Aufwand für die Brechung ist auf genau den Geräten unsichtbar, auf denen die meisten Menschen die Seite sehen.

Wo er sich lohnt: als dezentes Detail. Eine schwebende Navigationsleiste, ein Cookie-Banner, ein einzelnes Overlay, wo das Glas den Inhalt darunter bewusst durchscheinen lässt und einen Moment Wertigkeit erzeugt. Sparsam, funktional, mit sauberem Fallback. So, wie Apple es meint.

Fazit

Liquid Glass im Web ist kein Zauber, sondern Lichtbrechung per Displacement-Map - plus eine Handvoll Bugs, die zwischen dem hübschen Demo-Video und der funktionierenden Umsetzung liegen. Die unsichtbare Map über Alpha 0, die Asymmetrie durch falsche Maße, die Transform-Falle, das komplette Fehlen auf iOS: Wer das kennt, spart sich einen frustrierenden Nachmittag. Und wer den Effekt dann sparsam und mit Fallback einsetzt, statt ihn über die halbe Seite zu gießen, bekommt genau das wertige Detail, für das er gedacht war.