Glassmorphism CSS: Milchglas-Effekt mit backdrop-filter

Der Glassmorphism-CSS-Effekt — jener Milchglas-Look, der alles dahinter verschwimmen lässt — ist zu einem festen Bestandteil modernen Interface-Designs geworden. Der Trick liegt nicht in einer einzigen magischen Eigenschaft; er entsteht aus dem Zusammenspiel einer transluzenten Hintergrundfarbe, einer über backdrop-filter erzeugten Unschärfe, einem dünnen Rand und einem weichen Schatten. In dieser Anleitung bauen wir den Effekt von Grund auf und behalten dabei sowohl Performance als auch Barrierefreiheit im Blick.

Was Glassmorphism ist und aus welchen Schichten es besteht

Wenn du auf eine echte Glasscheibe blickst, nimmst du vier Dinge gleichzeitig wahr: das verschwommene Bild dahinter, die leichte Tönung des Glases, das Glänzen entlang der Kante und das Gefühl, dass die Oberfläche schwebt. In CSS ahmen wir das mit folgenden Schichten nach:

• Unschärfe: backdrop-filter: blur(...) macht die Pixel hinter dem Element unscharf.
• Transluzenz: eine Füllfarbe mit niedriger Deckkraft über rgba() oder hsl(... / 0.x).
• Kante: ein 1px halbtransparenter weißer border ahmt das Licht nach, das sich am Rand bricht.
• Tiefe: ein breiter, weicher box-shadow erzeugt das Schwebegefühl.

Ein entscheidender Punkt: Der Effekt ist nur sichtbar, wenn es hinter der Fläche etwas zum Verschwimmen gibt. Auf einem flachen, einfarbigen Hintergrund verschwindet Glassmorphism; du brauchst einen farbigen Verlauf, ein Foto oder Blob-Formen.

Eine einfache Glassmorphism-CSS-Karte

In ihrer schlichtesten Form sieht eine Glaskarte so aus. Wir färben zuerst den Hintergrund und bauen dann die Karte:

body {
  min-height: 100vh;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  display: grid;
  place-items: center;
}

.glass {
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  padding: 2rem;
  color: #fff;
}

Die Zeile -webkit-backdrop-filter steht nicht umsonst da: Safari unterstützte lange nur die Variante mit Präfix, und auf mobilem Safari ist es weiterhin klug, auf Nummer sicher zu gehen. Schreibe die Zeile mit Präfix immer vor die Standardzeile.

backdrop-filter feinjustieren

backdrop-filter nimmt nicht nur blur(); du kannst mehrere Filter durch Leerzeichen getrennt verketten. Die Sättigung zu erhöhen ist eine hervorragende Methode, das Glas lebendiger wirken zu lassen:

.glass {
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

Ein paar praktische Hinweise:

• Unschärfe-Stärke: 8–16px ist für die meisten Karten ideal. Über 30px wird es langsam und verliert das "Glas"-Gefühl.
• Deckkraft der Füllung: 0,10–0,20 bei einem hellen Theme, 0,05–0,10 bei einem dunklen Theme bleibt meist ausgewogen.
• Sättigung: saturate(150%–180%) lässt die Farben dahinter aufleben und nähert sich an, wie echtes Glas Licht bricht.

Das Kantenglänzen realistisch gestalten

Ein flacher, einfarbiger Rand wirkt etwas künstlich. In echtem Glas kommt das Licht von oben, daher ist die obere Kante heller als die untere. Du kannst das mit einem Verlaufsrand statt eines einfarbigen nachahmen:

.glass {
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.12)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.1)) border-box;
}

Hier verwenden wir einen zweischichtigen background: Der erste Verlauf färbt die Füllung über padding-box, der zweite färbt den Rand über border-box. Die Kante verläuft dann von hell nach dunkel, von Ecke zu Ecke.

Barrierefreiheit und Lesbarkeit

Die größte Falle bei Glassmorphism ist der Kontrast. Text auf einer transluzenten Fläche kann je nach Farbe dahinter unlesbar werden. Ein paar Schutzmaßnahmen:

• Strebe ein Kontrastverhältnis von mindestens 4,5:1 zwischen Text und Hintergrund an (WCAG AA, normaler Text).
• Befindest du dich über einem stark variierenden Hintergrund, füge dem Text einen dezenten text-shadow hinzu oder erhöhe die Deckkraft der Fläche etwas.
• Doppelte Absicherung: Wird backdrop-filter nicht unterstützt, gib einen etwas deckenderen Fallback-Hintergrund, damit die Fläche nicht völlig transparent bleibt und den Text verschluckt.

.glass {
  background: rgba(30, 30, 50, 0.6); /* Fallback: deckender */
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgba(255, 255, 255, 0.12); /* Glas: transparenter */
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
  }
}

Dank der @supports-Abfrage nutzt der Browser den transparenten Glas-Look, wenn er backdrop-filter unterstützt, und den lesbaren, deckenden Fallback, wenn nicht. Das ist ein Musterbeispiel für Progressive Enhancement.

Performance: wo Vorsicht geboten ist

backdrop-filter ist kein günstiger Effekt; der Browser muss den Bereich dahinter in jedem Frame neu verschwimmen lassen. Achte auf:

• Anzahl begrenzen: Nutze eine Handvoll Glasflächen statt Dutzender auf demselben Bildschirm. Unschärfe auf jede Zeile einer langen Liste anzuwenden bremst auf Mobilgeräten spürbar.
• Nicht animieren: Animationen, die den Wert von backdrop-filter in jedem Frame ändern, sind teuer; bewege die Fläche stattdessen mit transform oder opacity.
• Bewegung reduzieren: Berücksichtige prefers-reduced-motion und leistungsschwache Geräte; biete bei Bedarf eine einfache deckende Fläche außerhalb von @supports an.

Häufige Fragen

Funktioniert backdrop-filter in allen Browsern?

Es wird in aktuellen Versionen von Chrome, Edge, Firefox und Safari unterstützt; Safari verlangte lange das -webkit--Präfix, daher bleibt das Hinzufügen der Präfixzeile eine gute Angewohnheit. Für ältere Browser nutze immer den @supports-Fallback von oben.

Was ist der Unterschied zwischen backdrop-filter und filter?

filter macht das Element selbst unscharf (inklusive Inhalt); backdrop-filter macht die Pixel hinter dem Element unscharf und lässt den Inhalt scharf. Für den Glaseffekt brauchst du Letzteres.

Der Effekt erscheint nicht — warum?

Die zwei häufigsten Ursachen: Es gibt keinen inhaltsreichen Hintergrund hinter der Fläche zum Verschwimmen (auf einer flachen Farbe ist er unsichtbar), oder die Füllung der Fläche ist völlig deckend und verdeckt die unscharfe Schicht. Verwende einen farbigen Verlauf und senke die Deckkraft der Füllung.

Möchtest du eine moderne Glasnote für deine Oberfläche? Ich gestalte und programmiere performante, barrierefreie Glassmorphism-Komponenten, die zu deiner Marke passen — nimm Kontakt auf und lass uns deine Idee gemeinsam umsetzen.