Was ist Glassmorphism und wie baue ich es in CSS?
Glassmorphism ist der Milchglas-Effekt, den macOS Big Sur, das iOS Control Center und Windows 11 bekannt gemacht haben. Eine Karte wirkt, als bestünde sie aus getöntem, weichgezeichnetem Glas, das den Hintergrund durchscheinen lässt. Es ist ein moderner UI-Standard für Overlays, Sidebars, Navbars und Modals.
In CSS ist es ein Stapel aus ein paar Eigenschaften: `backdrop-filter: blur()` zeichnet weich, was hinter dem Element liegt, ein transluzenter Hintergrund ergänzt die Tönung, ein 30%-Weißer Border simuliert den Glasrand, ein weicher Schatten hebt das Element vom Hintergrund ab.
Hier wählst du einen bunten Hintergrund (Verlauf oder Pseudo-Foto) und siehst den Effekt live. Schieberegler steuern Blur-Stärke, Sättigung der Farben hinter dem Glas, Tönungsfarbe und Alpha. Ausgabe ist ein fertiger `.glass {...}`-CSS-Block.
So nutzt du es
- Wähl einen Hintergrund aus den Kacheln (Verläufe, synthetisches Foto). Der Hintergrund muss bunt und abwechslungsreich sein, damit der Blur sichtbar wird.
- Blur = Stärke des Weichzeichnens (16-24px ist modern, 30-40px ist der starke Milchglas-Look).
- Saturate = Sättigung der Farben hinter dem Glas (100% = original, 180% = aufgepumpt, gibt das Premium-Feel).
- Tönung + Alpha = leichte Einfärbung des Glases. Weiß mit Alpha 0,1-0,3 für Light Mode, Schwarz mit Alpha 0,3 für Dark.
- Border mit 30% Weiß-Alpha simuliert den Glasrand. Schatten hebt die Karte vom Hintergrund. Kopier das CSS und füg es in dein Stylesheet ein.
Wann das hilft
Glassmorphism ist ein Standard im modernen Design, vor allem für Overlay-UI. Ein paar Orte, an denen es glänzt:
- Navbar über einem Foto-Hero. Transparente und weichgezeichnete Navbar, Inhalt scrollt drunter, du siehst ihn durchs Glas.
- Modal / Dialogbox. Karte schwebt über einem abgedunkelten Backdrop, der weichgezeichnete Hintergrund schimmert durchs Glas.
- App-Sidebar (Notion, Linear). Vor allem auf der rechten Seite über Inhalten.
- Karten in einer Hero-Sektion. Drei Feature-Karten mit Milchglas-Effekt auf einem bunten Hintergrund.
- Music-Player-Overlay. Apple Music / Spotify Desktop ist ein Lehrbuch-Beispiel für Glassmorphism.
- Notification-Toast. Ein leicht weichgezeichneter Backdrop hält den Toast lesbar, ohne den Kontext zu verstecken.
Denk dran: Glassmorphism braucht Farbe hinter dem Glas. Über einem reinen weißen Hintergrund ist der Effekt unsichtbar. Die besten Ergebnisse gibt's über Fotografie, Verläufen oder einer bunten Sektion. Für reinen Blur ohne Tönung sieh Box-Shadow. Für Eckenrundung nutze Border-Radius.