Liquid Glass mit CSS umgesetzt

• So lassen sich die Kerneffekte der von Apple auf der WWDC25 vorgestellten Liquid-Glass-Designsprache mit einer Kombination aus CSS und SVG-Filtern nachbilden
• Verschiedene Layer, die echtes Glas imitieren, wie Specular Highlights, Blur, Color Filter, Refraction, Edge/Ripple Distortion und Chromatic Aberration, werden Schritt für Schritt mit CSS/SVG umgesetzt
• Für die Umsetzung der zentralen Effekte kommen fortgeschrittene CSS-/SVG-Techniken wie backdrop-filter, box-shadow, SVG DisplacementMap, Turbulence, ColorMatrix, Offset und Blend zum Einsatz
• Die Browser-Kompatibilität ist vor allem auf Chrome ausgerichtet; in Safari/Firefox funktionieren SVG-Filter nicht, sodass nur Blur und Shadow angewendet werden
• Je komplexer die Effekte sind, desto höher ist die GPU-Auslastung; bei übermäßigem Einsatz im gesamten UI kann die Performance leiden, daher wird der Einsatz auf zentrale Bereiche empfohlen

---

Was ist Liquid Glass?

• Apples neueste Designsprache, die hochwertige grafische Effekte anstrebt und dabei wie echtes Glas Lichtreflexion, Brechung, Farbveränderungen und räumliche Tiefe imitiert
• Sie wird verwendet, um UI-Elementen mehr Tiefe und Lebendigkeit zu verleihen, und zeichnet sich durch eine visuell glatte Anmutung aus, die an eine physische Materialität erinnert

Wichtige Effekt-Layer und ihre Umsetzung

1. Specular Highlights (Reflexlichter auf Glas)

• Highlights an den Glaskanten betonen Tiefe und Plastizität
• Mehrere inset box-shadow-Effekte werden in CSS übereinandergelegt, um den Eindruck von lichtabhängigen Reflexionen aus verschiedenen Winkeln zu erzeugen

  box-shadow:  
      inset 10px 10px 20px rgba(153, 192, 255, 0.1),  
      inset 2px 2px 5px rgba(195, 218, 255, 0.2),  
      inset -10px -10px 20px rgba(229, 253, 190, 0.1),  
      inset -2px -2px 30px rgba(247, 255, 226, 0.2);  
  

• Unter Bezug auf den [Fresnel Effect] wird die Stärke der Lichtreflexion natürlich abgestimmt

2. Blur (Hintergrund-Unschärfe)

• Um Blur nur auf Inhalte hinter dem Glas anzuwenden, wird backdrop-filter: blur(20px); verwendet
• Der Effekt wirkt nicht auf das eigentliche Element selbst, sondern nur auf den Hintergrundinhalt

3. Color Filter (Farbakzentuierung)

• Durch zusätzliche backdrop-filter wie contrast(80%) saturate(120%) werden höhere Sättigung und geringerer Kontrast im Inhalt hinter dem Glas erzeugt, um kräftigere Farben darzustellen

  backdrop-filter: blur(20px) contrast(80%) saturate(120%);  
  

4. Brechungs-Refraction-Simulation

• Der Brechungseffekt, bei dem die Wölbung von Glas den Hintergrund verzerrt erscheinen lässt, stößt mit reinem CSS an Grenzen und wird daher in Kombination mit SVG-Filtern umgesetzt

• Displacement Map: Mithilfe von SVG-Gradienten wird eine Verzerrungs-Map (Identity Map) erzeugt, die an den Rändern Pixel komprimiert und im Zentrum dehnt

  • In der Beispiel-SVG definieren rote/blaue Gradienten die Pixelverschiebung in X-/Y-Richtung
  • Durch Anpassen der Gradient-Ramps wird das Muster aus Randkompression und Zentrumsausdehnung gestaltet
  • Das SVG wird in eine Data-URL umgewandelt, mit feImage geladen und in feDisplacementMap für die Koordinatentransformation genutzt

• Ripple Distortion: Durch die Kombination von feTurbulence (Rauschtextur) und einer zusätzlichen feDisplacementMap werden selbst feine Wellen auf der Glasoberfläche dargestellt

• Chromatic Aberration (chromatische Aberration/Farbsaum): Mit einer Kombination aus feColorMatrix, feOffset und feBlend werden die einzelnen RGB-Kanäle getrennt, versetzt und anschließend wieder zusammengesetzt, um die in echtem Glas sichtbare Lichtstreuung nachzuahmen

Anwendung der CSS-/SVG-Effekte

• Nach der Definition des SVG-Filters wird er mit filter: url(#filterId); auf DOM-Elemente angewendet
• Die kombinierte Filterkette reproduziert gleichzeitig Textur, Lichtverzerrung und Farbmodulation eines echten Glaspanels

Hinweise zu Kompatibilität und Performance

• SVG-Displacement-Filter werden nur in Chrome korrekt unterstützt. In Safari, Firefox usw. ist der Effekt eingeschränkt und es bleiben nur Blur/Shadow übrig
• Bei vielen Glaselementen oder bei Animationen entsteht hohe GPU-Last, was zu geringerer Rendering-Performance führen kann
• In der Praxis eignet sich der Einsatz nur für ausgewählte UI-Bereiche mit Hervorhebungsbedarf, etwa Hero-/Feature-Bereiche

Referenzen und Credits

• Diese Umsetzung basiert auf Smashing Magazines "A Deep Dive Into The Wonderful World Of SVG Displacement Filtering" und der offiziellen Apple-Dokumentation zu Liquid Glass
• Entscheidend ist die kombinierte Nutzung moderner Webtechnologien wie SVG displacement, CSS backdrop-filter und box-shadow

[geek12356]

Ich finde, was diese Person umgesetzt hat, wirkt natürlicher.
https://v0.dev/chat/dynamic-frame-layout-1VUCCecq7Uy

[zabefofoon]

Das scheint in Safari nicht zu funktionieren.

[bobross0]

Im Web wirkt die Umsetzung immer noch etwas unnatürlich, haha.