Glassmorphism-Generator – Milchglas-Effekt mit CSS
Gestalte Milchglas-Karten und -Panels mit Live-Vorschau. Stelle Unschärfe, Transparenz, Sättigung, Rahmen und Eckenradius auf einem farbigen Hintergrund ein und kopiere produktionsreifes CSS.
Regler für Unschärfe, Transparenz, Sättigung, Rahmen-Deckkraft und Radius bewegen und eine Glasfarbe wählen – die Karte auf dem bunten Hintergrund ändert sich live. Das kopierte CSS enthält einen halbtransparenten Hintergrund, backdrop-filter samt -webkit-Präfix für Safari, einen feinen Rahmen und optional einen weichen Schatten.
So funktioniert: Glassmorphism-Generator
- Vorschau-Hintergrund wählen.
- Unschärfe und Transparenz einstellen.
- Sättigung, Rahmen und Eckenradius anpassen.
- Glasfarbe wählen und Schatten ein- oder ausschalten.
- CSS kopieren und auf Karte oder Panel anwenden.
Was ist Glassmorphism?
Glassmorphism ahmt Milchglas nach: eine halbtransparente Fläche, die alles dahinter verwischt, oft mit dünnem hellem Rahmen und weichem Schatten. Bekannt wurde der Stil durch macOS Big Sur und Windows 11; er wirkt am besten auf farbigen, abwechslungsreichen Hintergründen.
Das CSS dahinter
Der Effekt entsteht durch `backdrop-filter`, das den Inhalt hinter dem Element weichzeichnet. Ein halbtransparenter Hintergrund lässt diesen verschwommenen Inhalt durchscheinen.
| Eigenschaft | Aufgabe | Typischer Wert |
|---|---|---|
| background | Getönte, durchsichtige Fläche | rgba(255, 255, 255, 0.15–0.3) |
| backdrop-filter | Verwischt den Hintergrund | blur(8–16px) saturate(150–180%) |
| border | Glanzkante | 1px solid rgba(255, 255, 255, 0.3) |
| border-radius | Weiche Ecken | 12–24px |
| box-shadow | Hebt das Panel ab | 0 8px 32px rgba(0, 0, 0, 0.18) |
Safari braucht noch `-webkit-backdrop-filter`, deshalb enthält der Code beide Zeilen.
Lesbarkeit und Barrierefreiheit
Glasflächen verändern sich mit dem, was dahinter liegt – der Textkontrast kann innerhalb der Karte schwanken. Nutze bei langen Texten mehr Unschärfe, weniger Transparenz oder eine dunklere Tönung und prüfe das Ergebnis mit dem Farbkontrast-Checker. Wer im System reduzierte Transparenz aktiviert, bekommt per `@media (prefers-reduced-transparency: reduce)` einen festen Hintergrund.
Performance
Die Grafikkarte übernimmt das Weichzeichnen, für wenige Elemente ist das schnell. Viele große, animierte Glasflächen können ältere Smartphones bremsen – setze Glas gezielt für Navigation, Modals und Hero-Karten ein.
Kombinieren
Den bunten Hintergrund baust du im CSS-Verlauf-Generator, Schatten verfeinert der CSS Box-Shadow-Generator, Ecken formt der Border-Radius-Generator. Der Code entsteht im Browser.
Wo Glas am besten wirkt
Navigationsleisten über Bildern, Login-Karten auf Verläufen, Overlays von Musikplayern und Dashboards mit bunten Diagrammen sind ideale Einsatzorte. Auf einem rein weißen Hintergrund gibt es nichts zu verwischen, und der Effekt verschwindet. Halte die Zahl der Glasflächen klein, damit sie besonders wirken.
Diese kostenlosen Tools könnten dir auch helfen: JSON formatieren, Passwort-Generator und Regex-Tester.
Häufige Fragen
Wie erstelle ich einen Glas-Effekt in CSS?
Halbtransparenten Hintergrund mit backdrop-filter: blur() kombinieren, z. B. background: rgba(255,255,255,.2); backdrop-filter: blur(12px).
Warum funktioniert backdrop-filter nicht?
Das Element braucht einen halbtransparenten Hintergrund und etwas Farbiges dahinter. Safari benötigt zusätzlich -webkit-backdrop-filter.
Funktioniert Glassmorphism in allen Browsern?
Ja, alle aktuellen Browser unterstützen backdrop-filter. Ältere zeigen den Hintergrund ohne Unschärfe.
Ist Glassmorphism barrierefrei?
Ja, wenn der Text genug Kontrast hat. Mehr Unschärfe oder Tönung hilft; Kontrast immer prüfen.
Macht backdrop-filter die Seite langsam?
Wenige Elemente nicht. Viele große oder animierte Glasflächen können ältere Geräte bremsen.
Zuletzt aktualisiert: