# backdrop-filter

Status: Baseline 2024 (Chrome 76, Safari 18 unpräfixiert, Firefox 103).  
Quelle: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter  
Seite: https://designforai.dev/de/css/backdrop-filter

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.

## HTML

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

## CSS

```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
}
```

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.

## 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.