amazing-glass heißt eine quelloffene Bibliothek, die Apples Liquid-Glass-Optik mit echter Lichtbrechung auf Webseiten holt. Der Entwickler Ivan Tomac glich seine Glasflächen Pixel für Pixel mit Apples eigenem Renderer ab. Den vollen Effekt zeigen allerdings nur Chrome, Edge und andere Chromium-Browser.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Im Mittel um rund 2 von 255 Farbstufen weicht amazing-glass von Apples Liquid Glass ab. Diesen Wert nennt das Messprotokoll, das Tomac samt Prüfaufbau Ende September auf GitHub veröffentlichte.[1] Apple hatte das Material im Juni 2025 für iOS 26, macOS Tahoe 26 und seine übrigen Systeme vorgestellt.[2]
Das Wichtigste in Kürze
- amazing-glass liefert zehn Glas-Bedienelemente und eine freie Glasfläche als Web Components, dazu Wrapper für React und Vue, kostenlos unter MIT-Lizenz.
- Die Lichtbrechung über Seiteninhalten zeigen nur Chromium-Browser, Safari und Firefox erhalten Milchglas mit Tönung.
- Version 0.1.0 liegt bisher nur auf GitHub, nicht im npm-Verzeichnis.
Wie bricht amazing-glass das Licht im Browser?
Ein Skript berechnet für jede Glasform einmalig eine Brechungskarte nach dem Snelliusschen Brechungsgesetz. Ein SVG-Filter verschiebt damit die Pixel hinter dem Element, je Farbkanal mit leicht anderer Stärke. So entsteht der feine Regenbogen am Glasrand.[1]
Die Filterkette besteht aus Standardbausteinen: feGaussianBlur für den Milchglas-Anteil, feDisplacementMap für die Verschiebung, feColorMatrix und feComponentTransfer für die Farbkorrektur.[3] Für den Abgleich zeichnete eine kleine SwiftUI-App Apples Glas über dieselben Testbilder. Ein Suchverfahren justierte danach die Parameter, bis der Abstand nicht mehr schrumpfte.[1]
Fertig verdrahtet liegen Schalter, Schieberegler, Tab-Leiste, Menü und ein ausfahrendes Bottom Sheet bei. Alle Bedienelemente beachten nach Tomacs Angaben die Systemeinstellungen für reduzierte Bewegung, reduzierte Transparenz und erhöhten Kontrast.[1]
Wo zeigt amazing-glass den vollen Effekt?
Die volle Lichtbrechung über Seiteninhalten läuft nur in Chrome, Edge, Arc, Brave und anderen Chromium-Browsern. Safari und Firefox führen keine SVG-Filter innerhalb von backdrop-filter aus und zeigen deshalb nur Milchglas, Tönung und Lichtkante.[1]
Ausgerechnet Apples eigener Browser bekommt also die Sparversion. Über Canvas-Flächen, die eine Seite selbst zeichnet, rechnet die Bibliothek die Brechung auch dort per Prozessor nach.[1]
Mit derselben Browsergrenze kämpft auch die bekannteste Alternative. Das Projekt liquid-glass-react sammelte seit Juni 2025 rund 6.300 GitHub-Sterne, beschränkt sich aber auf React und zeigt die Verschiebung in Safari und Firefox ebenfalls nicht.[4] amazing-glass setzt dagegen auf Custom Elements, die auch in Svelte, Angular oder einem PHP-Template laufen. Auf denselben Standard baut Jelly UI seine federnden Formularelemente.
Abweichung von Apples Glas vor und nach dem Abgleich
Was Ihre Besucher je nach Browser sehen
| Funktion | Chrome, Edge, Arc | Safari | Firefox |
|---|---|---|---|
| Milchglas, Tönung, Lichtkante | voll | voll | voll |
| Lichtbrechung über Seiteninhalten | voll | nur Milchglas | nur Milchglas |
| Verschmelzende Glastropfen | voll | nur über Canvas | nur über Canvas |
Ein Glaseffekt, den nur Chromium voll zeigt, taugt als Verzierung, nie als Hintergrund für Pflichttexte.
Markus Seyfferth, Chefredakteur Dr. Web
Was bedeutet der Glas-Look für barrierefreie Websites?
Durchscheinende Flächen schwächen den Kontrast der Schrift, sobald der Hintergrund wechselt. Die WCAG verlangen für normalen Text ein Kontrastverhältnis von mindestens 4,5:1. Das BFSG schreibt diese Anforderungen seit dem 28. Juni 2025 für viele Online-Shops und digitale Dienste vor.[5]
Die Nielsen Norman Group bemängelte im Oktober 2025, die durchscheinenden Bedienelemente in iOS 26 seien oft schwer zu erkennen.[6] Im Juni reagierte Apple mit einem Transparenzregler in macOS 27. Eine Web-Kopie übernimmt diese Schwäche, sobald Text über bewegten Fotos liegt.
Setzen Sie die Bibliothek zunächst für Zierflächen ein, etwa Tab-Leisten, Schalter oder den Kopfbereich. Prüfen Sie den Kontrast jeder Glasfläche über hellem und dunklem Hintergrund. Die Ansicht für Safari und Firefox simulieren Sie in Chrome mit dem URL-Parameter ?ag-fallback. Hosten Sie die beiden Dateien selbst, statt sie über das jsDelivr-CDN zu laden, das sonst bei jedem Aufruf die IP-Adressen Ihrer Besucher erhält.
Freelancer und Agenturen mit Apple-affinen Kunden sparen sich mit amazing-glass den Eigenbau. Für Kundenprojekte im Dauerbetrieb ist Version 0.1.0 mit sechs GitHub-Sternen allerdings noch sehr frisch. Beim Abwägen hilft ein Guide, der die WCAG in Designregeln übersetzt. Systematische Prüfwerkzeuge listet der Vergleich von Plattformen für digitale Barrierefreiheit.
Quellen
[1] Ivan Tomac: „amazing-glass: Glass that bends the page behind it“ (GitHub)
[2] Apple Newsroom: „Apple introduces a delightful and elegant new software design“
[3] Ivan Tomac: „Inside the glass“
[4] rdev: „liquid-glass-react: Apple’s Liquid Glass effect for React“ (GitHub)
[5] W3C: „Understanding Success Criterion 1.4.3: Contrast (Minimum)“
[6] Nielsen Norman Group: „Liquid Glass Is Cracked, and Usability Suffers in iOS 26“
Mehr Newshunger?
- Libraries.dev als Agent-Skill: Coding-Agenten lernen sieben UI-Effekte samt Einbauregeln
- Modern Web Types: TypeScript-Typen für neue Web-APIs, die bisher nur ein Browser kennt
- Liquid Gooey bringt den Gooey-Effekt als React-Komponente bis in Safari
- Tegaki verwandelt jede Schrift in animierte Handschrift
- CSS-Bildeffekte: Fotos wie aus Photoshop
- Webdesign Trends 2026: Was nach sechs Monaten bleibt
