# Glassmorphism

Auch bekannt als: Milchglas-UI, Glaskarten, Backdrop-Blur-UI, transluzentes UI  
Ära: 2020-2023 (Windows Vista Aero und iOS 7 als Vorfahren; 2020 von Michal Malewicz benannt)  
Seite: https://designforai.dev/de/style/glassmorphism

## Merkmale

- transluzente Flächen (Weiß bei 8-20 % Alpha) über einem bunten, unscharfen Hintergrund
- `backdrop-filter: blur(16-24px)` ist der ganze Trick; auf einem flachen Hintergrund funktioniert nichts
- 1px heller Rand (Weiß bei 25-40 %), der eine Glaskante vortäuscht
- weiche, breite Schatten in einer getönten Farbe, nie reines Schwarz
- Radius 16-24px, großzügiges Innenpadding
- der Hintergrund trägt unscharfe Farbkleckse, damit der Blur etwas zum Verwischen hat
- Schrift bleibt scharf und kontraststark über dem Glas

Palette: #0f172a Seitenbasis, #7c3aed und #06b6d4 Hintergrundkleckse, rgba(255,255,255,0.12) Glasfüllung, rgba(255,255,255,0.35) Glaskante, #f8fafc Text

Schrift: Manrope oder DM Sans für alles; Überschriften 600, Fließtext 400 bei 16px; keine dünnen Schnitte auf Glas (sie verschwinden im Blur)

## Do

- lege zwei oder drei große unscharfe Farbformen hinter das Layout, damit der Blur Tiefe zeigen kann
- beschränke Glasflächen auf maximal zwei Ebenen: Karte und ein schwebendes Overlay
- prüfe jede Textfarbe gegen die unruhigste Stelle des Hintergrunds

## Don't

- stapele nicht Glas auf Glas auf Glas; das wird Matsch
- setze Glas nicht auf eine rein weiße oder rein schwarze Seite; da gibt es nichts zu verwischen
- vergiss nicht den soliden Fallback für Browser ohne backdrop-filter

Bekannt dafür: Apple macOS Big Sur, Microsoft Fluent Acrylic, Stripe-Dashboards (teilweise)

## CSS-Seed

```css
:root{--bg:#0f172a; --fg:#f8fafc; --accent:#7c3aed; --glass:rgba(255,255,255,0.12); --edge:rgba(255,255,255,0.35); --radius:20px; --shadow:0 8px 32px rgba(31,38,135,0.37); --font:'Manrope',sans-serif}
```

## Prompt

Baue die Seite im Glassmorphism-Stil. Seitenhintergrund #0f172a mit drei großen unscharfen radialen Klecksen in #7c3aed, #06b6d4 und #ec4899 (filter: blur(80px), opacity 0.6) hinter dem Inhalt. Jede Karte, Navigationsleiste und jedes Modal ist eine Glasfläche: background rgba(255,255,255,0.12), backdrop-filter blur(20px) saturate(160%), 1px border rgba(255,255,255,0.35), border-radius 20px, box-shadow 0 8px 32px rgba(31,38,135,0.37). Text #f8fafc, Sekundärtext rgba(248,250,252,0.7). Schrift Manrope: Überschriften 600 bei 40/28/20px, Fließtext 400 bei 16px, line-height 1.6. Buttons: solides #7c3aed mit weißem Text, Radius 12px, Hover hebt um 2px an mit hellerem Schatten. Abstände auf einer 8px-Skala, Kartenpadding 24-32px. Liefere einen soliden Fallback (rgba(15,23,42,0.85)), wenn backdrop-filter nicht unterstützt wird. Motion: 200ms ease-out nur bei Hover; keine scrollgesteuerten Animationen.