Glassmorphism in reinem CSS — Schritt für Schritt

Glassmorphism — der „Milchglas“-Effekt — verleiht Karten und Overlays Tiefe, ohne schwer zu wirken. Das Geheimnis ist eine Kombination aus Unschärfe, Transparenz und einem feinen Rand. Hier baust du ihn Schritt für Schritt korrekt auf.

Die drei Zutaten

Jedes echte Glassmorphism-Element kombiniert immer diese drei Eigenschaften:

• backdrop-filter: blur(...) — verwischt, was hinter dem Element liegt.
• Ein halbtransparenter Hintergrund, damit der Blur überhaupt sichtbar wird.
• Ein heller, dünner Rand (1 px), der die Glaskante andeutet.

Das Basis-Rezept

Wichtig: Glassmorphism braucht einen farbigen oder bildhaften Hintergrund hinter dem Element — auf reinem Schwarz oder Weiß sieht man den Effekt nicht.

.glass {
  /* halbtransparent — nur so wirkt der Blur */
  background: rgba(255, 255, 255, 0.08);
  /* der eigentliche Milchglas-Effekt */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); /* Safari */
  /* feine Glaskante + Tiefe */
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

Eine komplette Glass-Karte

Einsatzbereites Beispiel — lege es über einen farbigen Verlaufs-Hintergrund:

<div class="scene">
  <div class="glass-card">
    <h3>Elementa Pro</h3>
    <p>Effektreiche Komponenten — DSGVO-konform, kostenlos.</p>
  </div>
</div>

<style>
.scene {
  display: grid; place-items: center; min-height: 320px; padding: 40px;
  background: linear-gradient(120deg, #8b5cf6, #06b6d4);
}
.glass-card {
  max-width: 300px; padding: 24px; color: #fff;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 18px;
  box-shadow: 0 16px 50px rgba(0,0,0,.25);
}
</style>

Fallback für ältere Browser

backdrop-filter wird zwar breit unterstützt, aber sichere dich mit @supports ab — sonst wird deine Karte auf Alt-Browsern unlesbar transparent:

@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(20, 20, 30, 0.9); } /* deckend statt durchsichtig */
}

Kontrast & Barrierefreiheit

• Text-Overlay-Trick: eine leicht dunklere Ebene unter dem Text erhöht den Kontrast.
• Erhöhe im Zweifel die Deckkraft des Hintergrunds (z. B. rgba(...,0.15)).

Performance-Tipps

• backdrop-filter ist GPU-lastig — nutze es sparsam, nicht auf Dutzenden Elementen gleichzeitig.
• Vermeide es auf großen, scrollenden Flächen; das kann auf schwächeren Geräten ruckeln.
• Kombiniere es nicht mit vielen gleichzeitigen Animationen desselben Elements.

Fazit

Transparenz + Blur + Kante = Glas. Achte auf einen farbigen Hintergrund, einen Fallback und ausreichenden Kontrast. Fertige Glass-Komponenten findest du in der Card-Sammlung.