Was ist Glassmorphism?

Ein visueller Stil, bei dem ein durchscheinendes Panel alles dahinter weichzeichnet, wie Milchglas, meist mit einem dünnen hellen Rahmen und einem weichen Schatten. In CSS kombiniert er einen halbtransparenten Hintergrund mit backdrop-filter: blur().

Warum ist mein Glas-Panel nicht weichgezeichnet?

backdrop-filter wirkt nur auf Inhalte hinter dem Element. Das Element braucht daher einen transparenten oder halbtransparenten Hintergrund und etwas Sichtbares dahinter. Ein vollständig deckender Hintergrund verbirgt den Effekt.

Welche Browser unterstützen backdrop-filter?

Aktuelle Versionen von Chrome, Edge, Firefox und Safari unterstützen es. Safari-Versionen vor 18 benötigen das Präfix -webkit-, das im exportierten CSS enthalten ist.

Glassmorphism-Generator

Erstelle Milchglas-Panels mit backdrop-filter. Passe Unschärfe, Transparenz, Sättigung und Rahmen auf einem Live-Hintergrund an und kopiere das CSS.

Live-Vorschau

Milchglas

Text auf Glas braucht an jeder Stelle des Hintergrunds genug Kontrast.

Der Hintergrund dient nur der Vorschau und wird nicht exportiert.

.glass {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.25);
}

Alles bleibt in deinem Browser.

Formatreferenzen

MDN — backdrop-filter
W3C — WCAG 2.2 contrast (minimum)

Tool-Seite aktualisiert: 2026-10-25

Live-Vorschau

Anleitung und Beispiel

Ähnliche Tools

Formatreferenzen