# Liquid Glass

Auch bekannt als: Apple Liquid Glass, iOS-26-Glas, refraktives UI, Linsenglas  
Ära: ab 2025 (Apple WWDC 2025)  
Seite: https://designforai.dev/de/style/liquid-glass

## Merkmale

- Glas, das sich wie eine Linse verhält: Kanten brechen das Licht und werden heller, die Mitte bleibt klar
- Glanzlicht entlang der Oberkante, dezenter dunkler Rand unten
- Flächen sind pillen- oder kapselförmig und schweben über dem Inhalt, statt ihn zu rahmen
- Bedienelemente morphen und verschmelzen (eine Tab-Leiste wird beim Scrollen zu einer einzelnen Pille)
- der Hintergrund ist echter Inhalt (Fotos, Karten), keine dekorativen Kleckse
- sehr hoher Radius (volle Pillen), dünne Schrift, kompakte Bedienelemente
- Motion ist fließend und physikbasiert: federnd, schnell, mit leichtem Überschwingen

Palette: inhaltsgetrieben, aber das Chrome nutzt rgba(255,255,255,0.18) Füllung, rgba(255,255,255,0.6) oberes Glanzlicht, rgba(0,0,0,0.12) unterer Rand, #0a84ff Akzent, #ffffff Text auf Dunkel, #1c1c1e Text auf Hell

Schrift: System-Sans (SF Pro bei Apple; Geist als freier Ersatz); Labels 500 bei 13-15px, Titel 600 bei 22-34px; Letter-Spacing bei Titeln leicht negativ

## Do

- lege Glas-Controls über reiche Bilder; der Effekt lebt von der Brechung dessen, was dahinter liegt
- baue das Glanzlicht aus zwei inset box-shadows (hell oben, dunkel unten) plus einem schwachen äußeren Glow
- nutze Spring-Easing (cubic-bezier(0.34,1.56,0.64,1)) bei 350-450ms für Morphs

## Don't

- nutze es nicht für große Container; Liquid Glass ist für Controls und schwebende Leisten, nicht für Seitenabschnitte
- opfere keine Lesbarkeit für den Effekt; lege einen dunklen Scrim unter Text, wenn der Hintergrund unruhig ist
- fake es nicht mit flachem 10 % Weiß; die Kantenbehandlung ist der ganze Stil

Bekannt dafür: Apple iOS 26 / macOS Tahoe, Toolbars in Apple Music und Karten

## CSS-Seed

```css
:root{--bg:#101418; --fg:#ffffff; --accent:#0a84ff; --glass:rgba(255,255,255,0.18); --hi:rgba(255,255,255,0.6); --rim:rgba(0,0,0,0.14); --radius:999px; --font:'Geist',sans-serif}
```

## Prompt

Baue die Seite im Apple-Liquid-Glass-Stil. Der Inhalt ist randlose Fotografie oder eine Karte; das gesamte Chrome schwebt darüber in kapselförmigen Flächen (border-radius 999px für Leisten, 28px für Sheets). Glasrezept: background rgba(255,255,255,0.18), backdrop-filter blur(24px) saturate(180%), box-shadow inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.14), 0 10px 30px rgba(0,0,0,0.25); dazu ein 1px äußerer Rand rgba(255,255,255,0.25). Akzent #0a84ff für den aktiven Tab und den Primärbutton. Schrift Geist: Titel 600 bei 28-34px mit -0.02em Tracking, Labels 500 bei 14px. Die untere Tab-Leiste klappt beim Scrollen zu einer einzelnen Pille zusammen, mit einem 400ms Spring (cubic-bezier(0.34,1.56,0.64,1)). Glas nur für Controls; Seitenabschnitte bleiben solide. Respektiere prefers-reduced-motion, indem du den Morph deaktivierst.