Unscharfe Hintergründe mit CSS Backdrop-Filter erstellen

Moderne Weboberflächen erfordern visuelle Tiefe ohne Leistungseinbußen. Die CSS-Eigenschaft backdrop-filter bietet eine leistungsstarke Lösung für die Erstellung von unscharfen Hintergründen und Glasmorphismus-Effekten. Im Gegensatz zu traditionellen Unschärfe-Techniken, die duplizierte Elemente oder komplexe Workarounds erfordern, bietet backdrop-filter einen sauberen, effizienten Ansatz zur Umsetzung dieser beliebten Designmuster.

CSS Backdrop-Filter vs. Filter verstehen

Die Eigenschaft backdrop-filter wendet grafische Effekte auf den Bereich hinter einem Element an, während die Standard-Eigenschaft filter das Element selbst und seine Kindelemente beeinflusst. Dieser grundlegende Unterschied macht backdrop-filter ideal für die Erstellung von Milchglas-Effekten, bei denen der Inhalt scharf bleibt, während der Hintergrund verschwimmt.

/* Verwischt das Element und seinen Inhalt */
.with-filter {
  filter: blur(10px);
}

/* Verwischt nur den Hintergrund hinter dem Element */
.with-backdrop-filter {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.2);
}

Das Element, das backdrop-filter verwendet, muss Transparenz aufweisen, um den Effekt sichtbar zu machen – entweder durch opacity oder halbtransparente Hintergründe.

Glasmorphismus mit CSS blur() erstellen

Glasmorphismus basiert auf drei Schlüsselkomponenten: Transparenz, Unschärfe und subtile Rahmen. Hier ist eine minimale Implementierung:

.glass-card {
  backdrop-filter: blur(16px);
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
}

<div class="glass-card">
  <h2>Milchglas-Effekt</h2>
  <p>Der Inhalt bleibt perfekt scharf</p>
</div>

Für stärkere Milchglas-Effekte kombinieren Sie mehrere Backdrop-Filter:

.frosted-panel {
  backdrop-filter: blur(20px) saturate(180%);
  background-color: rgba(255, 255, 255, 0.15);
}

Browser-Unterstützung

CSS backdrop-filter genießt mittlerweile grundlegende Unterstützung in allen gängigen Browsern:

• Chrome 76+ ✅ Vollständige Unterstützung
• Edge (Chromium) 79+ ✅ Vollständige Unterstützung
• Firefox 103+ ✅ Vollständige Unterstützung
• Safari 9+ ✅ Vollständige Unterstützung (mit -webkit--Präfix vor Version 17)
• Internet Explorer ❌ Keine Unterstützung

Safari 17 und höher benötigen das -webkit--Präfix nicht mehr. Für ältere Safari-Versionen fügen Sie die präfixierte Version hinzu:

.glass-element {
  -webkit-backdrop-filter: blur(10px); /* Safari 16 und älter */
  backdrop-filter: blur(10px);
}

Leistungsaspekte

Backdrop-Filter lösen GPU-beschleunigte Komposition aus, können aber die Leistung auf mobilen Geräten beeinträchtigen. Befolgen Sie diese Optimierungsstrategien:

.optimized-blur {
  backdrop-filter: blur(12px);
  will-change: backdrop-filter; /* Hinweis für Browser-Optimierung */
  transform: translateZ(0); /* GPU-Layer erzwingen */
}

Begrenzen Sie die Anzahl der Elemente, die gleichzeitig backdrop-filter verwenden. Auf mobilen Geräten sollten Sie den Unschärferadius reduzieren oder Effekte vollständig deaktivieren:

@media (max-width: 768px) and (hover: none) {
  .glass-card {
    backdrop-filter: blur(8px); /* Reduzierte Unschärfe auf Touch-Geräten */
  }
}

Barrierefreiheit und Benutzerpräferenzen

Respektieren Sie Benutzerpräferenzen für reduzierte Transparenz und Bewegung:

@media (prefers-reduced-transparency: reduce) {
  .glass-card {
    backdrop-filter: none;
    background-color: rgba(255, 255, 255, 0.95);
  }
}

@media (prefers-contrast: high) {
  .glass-card {
    backdrop-filter: blur(4px);
    background-color: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(0, 0, 0, 0.5);
  }
}

Stellen Sie ausreichende Farbkontrastverhältnisse für Text über unscharfen Hintergründen sicher. WCAG AA erfordert 4,5:1 für normalen Text und 3:1 für großen Text.

Fallback-Techniken für ältere Browser

Für Browser ohne backdrop-filter-Unterstützung implementieren Sie eine angemessene Degradierung:

.glass-fallback {
  /* Fallback für nicht unterstützte Browser */
  background-color: rgba(255, 255, 255, 0.85);
  
  /* Moderne Browser mit Unterstützung */
  @supports (backdrop-filter: blur(10px)) {
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
  }
}

Alternativer Ansatz mit Pseudo-Elementen für ältere Browser:

.legacy-blur {
  position: relative;
  background-color: rgba(255, 255, 255, 0.9);
}

.legacy-blur::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  filter: blur(10px);
  z-index: -1;
}

@supports (backdrop-filter: blur(10px)) {
  .legacy-blur::before {
    display: none;
  }
  .legacy-blur {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.2);
  }
}

Fazit

CSS backdrop-filter verändert die Art und Weise, wie wir unscharfe Hintergründe und Glasmorphismus-Effekte im modernen Webdesign erstellen. Mit grundlegender Browser-Unterstützung können Entwickler diese Effekte selbstbewusst implementieren und gleichzeitig die Leistung durch GPU-Optimierung aufrechterhalten sowie die Barrierefreiheitspräferenzen der Benutzer respektieren. Die Kombination aus Feature-Detection und Progressive Enhancement stellt sicher, dass die Benutzererfahrung bei den verbleibenden Legacy-Browsern angemessen degradiert, während sie für moderne Benutzer ausgefeilte Oberflächen liefert.

Häufig gestellte Fragen (FAQs)

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..