Glassmorphismus ist ein Gestaltungsstil mit halbtransparenten Flächen, durch die der Hintergrund unscharf durchscheint, wie durch Milchglas. Laut Nielsen Norman Group erzeugt er Tiefe über abgestufte Durchsichtigkeit; seine zwei Hauptmerkmale sind Deckkraft und Hintergrundunschärfe. Seit 2020 ist er verbreitet und prägt die Designsysteme von Apple und Microsoft.
- Glassmorphismus
Ein Gestaltungsstil mit halbtransparenten, milchglasartigen Flächen, durch die der Hintergrund unscharf durchscheint.
Beispiel: „Die Navigationsleiste folgt dem Glassmorphismus: Beim Scrollen schimmert der Inhalt unscharf durch.“Auch: Glassmorphism, Milchglas-Effekt.
Bei Microsoft heißt das Material Acrylic, bei Apple seit 2025 Liquid Glass.
Woher der Glassmorphismus kommt
Durchscheinende, weichgezeichnete Fensterrahmen gab es schon in Windows Vista. Apple stellte iOS 7 im Juni 2013 ausdrücklich mit Transluzenz vor. Im Juni 2025 führte Apple mit Liquid Glass ein durchscheinendes Material für alle seine Systeme ein, das seine Umgebung spiegelt und bricht.
Glassmorphismus in CSS
Den Milchglas-Effekt erzeugt die Eigenschaft backdrop-filter: Sie wendet Effekte wie Unschärfe auf den Bereich hinter einem Element an. Ohne Präfix läuft sie seit September 2024 in allen großen Browsern. Dazu kommen ein halbtransparenter Hintergrund und meist eine helle, feine Kontur.
.glas {
background: rgb(255 255 255 / 0.3);
backdrop-filter: blur(16px);
border: 1px solid rgb(255 255 255 / 0.5);
}Glassmorphismus und Lesbarkeit
Das größte Problem ist laut Nielsen Norman Group die Lesbarkeit: Was durchscheint, stört den Text. Die WCAG verlangen für Text ein Kontrastverhältnis von mindestens 4,5 zu 1, gemessen gegen den ungünstigsten Hintergrund. Nielsen Norman Group rät zu mehr Unschärfe und zu Einstellungen, mit denen Nutzer Transparenz reduzieren können; die Kritik an Liquid Glass von 2025 zeigt, wie schnell Text und Bedienelemente sonst untergehen.