CSS Glassmorphism 2025: die richtige Implementierung

Glassmorphism ist ein UI-Stil, der Milchglas simuliert: eine durchscheinende Oberfläche, die den Inhalt dahinter unscharf macht. Der Effekt basiert auf drei visuellen Eigenschaften:

• Hintergrundunschärfe mit backdrop-filter: blur()
• Durchscheinende Füllung mit rgba()
• Dezenter Rand zur Tiefenwirkung

Der häufige Fehler in 2021er-Tutorials war, filter: blur() auf die Card anzuwenden, was den Inhalt der Card unscharf macht. Das ist das Gegenteil des gewünschten Effekts.

.glass-card {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

Das -webkit--Präfix ist für Safari noch notwendig. Das Weglassen bedeutet, dass die Card für rund 20 Prozent des mobilen Traffics kaputt aussieht.

Hintergrund-Alpha und Unschärferadius

• Starke Unschärfe (20-30 px) und niedriges Alpha (0.05-0.12): maximaler Milchglas-Effekt
• Mittlere Unschärfe (10-16 px) und mittleres Alpha (0.12-0.25): Standard-Card
• Leichte Unschärfe (4-8 px) und hohes Alpha (0.3-0.5): subtiler Glas-Hinweis

WCAG 2.1 Level AA verlangt mindestens 4.5:1 für normalen Text und 3:1 für grossen Text. Da der Hintergrund eine Unschärfe von unvorhersehbarem Inhalt ist, kannst du das Kontrastverhältnis beim Design nicht kennen.

Drei Lösungen nach Priorität

1. Text-Shadow

.glass-card p {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

2. Höheres Alpha im Textbereich

.glass-card .text-area {
  background: rgba(0, 0, 0, 0.35);
  padding: 12px 16px;
  border-radius: 8px;
}

3. Hintergrund hinter der Card kontrollieren

Sicherstellen, dass der Bereich hinter der Glass-Card nie eine bestimmte Helligkeit überschreitet.

Auf einem Android-Mittelklassegerät mit komplexem Hintergrund kann eine einzige Glass-Card mit 12 px Unschärfe die Framerate von 60 fps auf 40 fps senken.

Performance-Regeln

• Unschärferadius auf 16 px begrenzen
• backdrop-filter nicht animieren, stattdessen opacity oder transform
• Keine gestapelten Glass-Layer auf der gleichen Z-Achse
• will-change: transform hinzufügen
• contain: layout style paint verwenden

@media (prefers-reduced-motion: reduce) {
  .glass-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.85);
  }
}

.glass-card {
  background: rgba(30, 30, 30, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass-card {
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
  }
}

@media (prefers-reduced-motion: reduce) {
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .glass-card {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      background: rgba(30, 30, 30, 0.88);
    }
  }
}

.glass-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}

@media (prefers-color-scheme: light) {
  .glass-card {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
  }
}

• Datendichte Interfaces wie Tabellen und Code-Editoren
• Inhalt über nutzergenerierte Bilder
• Low-Performance-Zielgeräte
• Häufig geöffnete und geschlossene interaktive Overlays

Nutze das PixCode Glassmorphism-Tool, um Änderungen in Echtzeit zu sehen und das finale CSS mit dem @supports-Fallback zu exportieren.

CSS Glassmorphism basiert auf der backdrop-filter-Property, die 2023 vollständige Cross-Browser-Unterstützung erreichte. 2025 liegt die globale Browser-Unterstützung bei etwa 96 Prozent. Firefox hat Unterstützung in Version 103 (2022) hinzugefügt, wodurch JavaScript-Polyfills nicht mehr nötig sind.

backdrop-filter erzwingt GPU-Compositing, was pro Frame und pro Pixel proportional zum Quadrat des Unschärferadius kostet. Für responsive Layouts empfiehlt es sich, den Radius auf kleineren Viewports per Media Query zu reduzieren.