backdrop-filter

Baseline 2024 (Chrome 76, Safari 18 unpräfixiert, Firefox 103).

Chrome 76Edge 76Safari 18Firefox 103

Wendet Blur/Saturate/Brightness auf das an, was hinter einem Element liegt, die Grundlage für Milchglas-Header, Sheets und Dialoge. Jetzt überall unpräfixiert.

Frosted header

CSS

.fx-023-bg {
  height: 180px;
  background: linear-gradient(135deg,#dbeaff,#ece0ff 50%,#d9f5f0) center/cover;
  padding: 16px
}
.fx-023 {
  backdrop-filter: blur(12px) saturate(1.4);
  background: #fff5;
  border: 1px solid #fff8;
  border-radius: 12px;
  padding: 12px 16px;
  font: 600 15px system-ui;
  color: #111
}

HTML

<div class="fx-023-bg"><header class="fx-023">Frosted header</header></div>

Fallback: Behalte einen halbdeckenden Hintergrund, damit Text lesbar bleibt, wenn der Filter nicht unterstützt wird; nutze `@supports (backdrop-filter: blur(1px))`, um die Deckkraft zu reduzieren, wenn er es ist.

Quelle: developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

Prompt

Nutze für Glasflächen `backdrop-filter: blur(12px) saturate(1.4)` plus einen transluzenten Hintergrund und einen 1px transluzenten Rand; halte den Hintergrund für sich allein deckend genug für den Kontrast. Füge keine `-webkit-`-Präfixe hinzu (unpräfixiert ist Baseline) und begrenze unscharfe Flächen in der Größe für die Performance.