# backdrop-filter in CSS: Milchglas, das schnell bleibt

[Canonical HTML page](https://gradiently.design/de/guide/css-blur-background)

Milchglas braucht drei Zeilen CSS und kann trotzdem ein gutes Smartphone ins Stocken bringen. Hier ist der Code, was das Zeichnen kostet, und die Fallbacks, die Worte lesbar halten, wenn die Unschärfe nie ankommt.

## The short version

- Der CSS backdrop-filter wendet Effekte wie Unschärfe auf den Bereich hinter einem Element an, nicht auf das Element selbst.
- Ein Element braucht einen teilweise transparenten Hintergrund, damit ein backdrop-filter sichtbar wird; auf einem deckenden Hintergrund ist der Effekt verborgen.
- Die Kosten der Unschärfe wachsen mit dem Radius und der Größe der unscharfen Fläche und fallen jedes Mal neu an, wenn sich der Inhalt dahinter bewegt.
- Safari brauchte bis Version 18 das Präfix -webkit-backdrop-filter, daher ist es weiterhin sicher, beide Zeilen auszuliefern.
- Ein guter Fallback ist ein deckenderer Hintergrund in einer @supports-Abfrage, damit Text lesbar bleibt, wenn die Unschärfe fehlt.

Ein **backdrop-filter** in CSS wendet einen grafischen Effekt, meist Unschärfe, auf alles an, was hinter einem Element liegt. Schreib `backdrop-filter: blur(12px)` an ein Element mit teilweise transparentem Hintergrund, und die Seite darunter wird weich: der Milchglas-Look von Navigationsleisten, Sheets und Karten. Jeder aktuelle Browser unterstützt ihn. Die Kunst liegt darin, die unscharfe Fläche klein, den Radius maßvoll und den Fallback lesbar zu halten.

## Das Grundrezept für Milchglas

Drei Dinge machen Glas aus: eine durchscheinende Füllung, damit der Hintergrund sichtbar ist, die Unschärfe selbst und eine feine Kante, damit das Panel eine Form hat. Die meisten ergänzen auch eine kleine Sättigungsanhebung, weil Unschärfe Farben mittelt und sie grauer lässt, als man erwartet.

```css
.glass {
  background: rgb(255 255 255 / 0.14);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 16px;
}
```

Ein helles Glaspanel für eine dunkle oder farbige Seite. Setz die Zeile mit Präfix zuerst, damit die Standardeigenschaft gewinnt, wo beide verstanden werden.

Glas sieht nur wie Glas aus, wenn dahinter etwas liegt, das sich zu verwischen lohnt. Auf einer flachen grauen Seite wirkt das Panel nur trüb. Leg es über ein Foto oder einen satten Verlauf, wie [Glassmorphism](https://gradiently.design/de/guide/glassmorphism) ausführlicher erklärt.

Glut und Violett auf Mitternacht: `radial-gradient(circle at 20% 25%, #f97316 0%, transparent 40%), radial-gradient(circle at 80% 70%, #7c3aed 0%, transparent 45%), linear-gradient(160deg, #0f172a 0%, #1e1b4b 100%)`

Ein Hintergrund mit klar getrennten Farbflecken. Die Unschärfe macht aus den Flecken weiches Licht hinter dem Panel, und genau darum geht es bei dem Effekt.

## Was backdrop-filter-Funktionen können

Die Eigenschaft akzeptiert dieselben Funktionen wie `filter`, und du kannst sie in einer Deklaration verketten. Sie wirken der Reihe nach von links nach rechts, daher verhält sich `blur()` vor `saturate()` anders als umgekehrt. Die vollständige Liste steht bei [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter).

| Funktion | Beispiel | Gut für |
| --- | --- | --- |
| `blur()` | `blur(12px)` | Milchglas, Fokus hinter einem Dialog |
| `saturate()` | `saturate(160%)` | Farbe zurückholen, nachdem die Unschärfe sie vergraut hat |
| `brightness()` | `brightness(0.7)` | Einen unruhigen Bereich hinter heller Schrift abdunkeln |
| `contrast()` | `contrast(0.8)` | Ein unruhiges Foto unter einem Panel beruhigen |
| `grayscale()` | `grayscale(1)` | Die Seite hinter einem Modal dämpfen |
| `none` | `none` | Den Effekt in einem Fallback oder einer Media Query abschalten |

Die Funktionen, die du wirklich nutzen wirst. `brightness()` unter 1 ist für die Lesbarkeit oft ein besseres Werkzeug als stärkere Unschärfe.

## Performance von backdrop-filter

Unschärfe gehört zu den teureren Dingen, die ein Browser zeichnet. Um einen Bereich unscharf zu machen, muss er jedes Pixel hinter dem Element lesen, die Nachbarn bis zum Radius abtasten und das Ergebnis zusammensetzen, und er wiederholt diese Arbeit, sobald sich hinter dem Panel etwas ändert. Ein Sticky Header über einer scrollenden Seite zeichnet seine Unschärfe in jedem Frame des Scrollens neu.

Die Kosten hängen an zwei Zahlen, die du steuerst: der Fläche des Elements und dem Radius. Ein 64 Pixel hoher Header mit 12px Unschärfe ist auf fast allem günstig. Ein bildschirmfüllendes Overlay mit 40px Unschärfe über einem Video kann auf einem Mittelklasse-Smartphone Frames verlieren. Das größere Bild steht in [Performance von CSS-Verläufen](https://gradiently.design/de/guide/css-gradient-performance).

### Langsam

- Den ganzen Viewport hinter einem Modal unscharf machen
- Radien ab 30px
- Den Unschärferadius beim Öffnen und Schließen animieren
- Glaspanels in Glaspanels verschachtelt
- Unschärfe über automatisch abspielendem Video

### Schnell

- Nur die Leiste, Karte oder das Sheet unscharf machen, das es braucht
- Radien zwischen 8px und 20px
- Die Deckkraft des Panels einblenden, die Unschärfe fest
- Eine Glasebene, darin deckende Füllungen
- Unschärfe über Standbildern und Verläufen

> **Miss auf einem echten Smartphone** Öffne in den Chrome-Entwicklertools das Panel Rendering, schalte Paint Flashing ein und scrolle. Blinkt das Glas in jedem Frame und zeigt das Performance-Panel verlorene Frames, verkleinere zuerst Fläche oder Radius.

## Warum backdrop-filter nicht funktioniert

Wenn die Unschärfe scheinbar nichts tut, liegt die Ursache fast immer in einer kurzen Liste.

1. **Prüf, ob der Hintergrund durchsichtig ist** Ein deckendes `background: #fff` verdeckt den unscharfen Hintergrund vollständig. Nutze einen Alphawert wie `rgb(255 255 255 / 0.15)`.
2. **Ergänze das Safari-Präfix** Safari akzeptiert die Eigenschaft ohne Präfix erst ab Version 18. Ältere iPhones brauchen weiterhin `-webkit-backdrop-filter`.
3. **Such nach einer Backdrop Root darüber** Ein Elternelement mit `filter`, `opacity` unter 1, einer Maske oder eigenem backdrop-filter begrenzt, was das Kind sehen kann. Das Kind macht dann nur dieses Elternelement unscharf, was oft wie gar keine Unschärfe aussieht.
4. **Achte auf fixierte Kinder** Wie `filter` macht ein backdrop-filter das Element zum Containing Block für fixierte und absolut positionierte Kinder. Ein fixiertes Menü in einem Glas-Header richtet sich dann am Header aus, nicht am Fenster.
5. **Sorg dafür, dass etwas dahinter liegt** Unschärfe über einer flachen Farbe ist unsichtbar. Scroll das Panel über ein Bild, um zu prüfen, ob es funktioniert.

## Ein Fallback, der Text lesbar hält

Durchscheinende Panels sind um die Unschärfe herum gestaltet. Ohne sie lässt eine weiße Füllung mit 14 Prozent über einem unruhigen Foto den Text direkt auf dem Foto stehen, und der Kontrast bricht ein. Schreib zuerst die lesbare Version und rüste sie dort auf, wo der Browser unscharf zeichnen kann.

```css
/* Works everywhere: opaque enough to read on its own */
.glass {
  background: rgb(15 23 42 / 0.86);
  color: #f8fafc;
}

/* Upgrade where blur is available */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgb(15 23 42 / 0.45);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
}

/* Respect people who ask for less transparency, where supported */
@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: rgb(15 23 42 / 0.94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
```

Progressive Enhancement für Glas. Die Unterstützung für `prefers-reduced-transparency` ist noch begrenzt, betrachte diesen Block also als Entgegenkommen, nicht als Garantie.

Prüf den Kontrast an der schlechtesten Stelle hinter dem Panel, nicht am Durchschnitt. Eine weiße Überschrift über Glas, das über einen hellen Himmel gleitet, kann weit unter die Verhältnisse aus [Farbkontrast und Barrierefreiheit](https://gradiently.design/de/guide/color-contrast-accessibility) fallen. Abdunkeln mit `brightness(0.7)` löst das meist zuverlässiger als stärkere Unschärfe.

## Wann du gar keine Unschärfe brauchst

Viel Milchglas existiert nur, um Worte über einem unruhigen Hintergrund lesbar zu machen. Wenn du den Hintergrund selbst gestaltest, löst ein ruhigerer das Problem ganz ohne Renderkosten. Ein weicher, kontrastarmer Verlauf hinter einem Hero braucht kein Panel; siehe [Website-Hero-Hintergründe](https://gradiently.design/de/guide/website-hero-background) und [unscharfe Hintergründe](https://gradiently.design/de/guide/blurred-background), wo die Unschärfe einmal ins Bild eingebacken wird, statt in jedem Frame berechnet zu werden.

Ein breiter Website-Hero mit einer Überschrift quer über dem hellsten Teil eines farbigen Verlaufs

Worte direkt über einem lebhaften Hintergrund: Hier greifen Leute zum Glaspanel.

Derselbe Website-Hero, bei dem der Verlauf hinter der Überschrift dunkler und ruhiger wird

Derselbe Hintergrund beruhigt sich hinter den Worten, ohne Panel, Schatten oder Unschärfe.

Der zweite Ansatz ist, wie Gradiently Lesbarkeit löst: Ein Mark weiß, wo die Worte stehen, und schiebt seine ruhigste, kontrastreichste Fläche hinter sie, sodass du nie einen Kasten oder eine Unschärfe brauchst, um eine Überschrift zu retten.

## FAQ

### Was ist der Unterschied zwischen filter und backdrop-filter?

`filter` verändert das Element und seinen Inhalt. `backdrop-filter` verändert nur, was durch den transparenten Hintergrund hinter dem Element sichtbar ist.

### Warum wird meine backdrop-filter-Unschärfe nicht angezeigt?

Meist ist der Hintergrund des Elements völlig deckend, Safari braucht das Präfix `-webkit-`, oder ein Elternelement mit `filter`, `opacity` oder einer Maske begrenzt, was das Element sehen kann.

### Ist backdrop-filter schlecht für die Performance?

Er kann es sein. Die Kosten wachsen mit unscharfer Fläche und Radius und fallen neu an, wann immer sich der Inhalt dahinter bewegt, also halte Glaspanels klein und Radien maßvoll.

### Brauche ich noch -webkit-backdrop-filter?

Safari akzeptiert die Eigenschaft ohne Präfix ab Version 18, aber ältere iPhones sind weiter in Gebrauch, daher ist es sinnvoll, beide Zeilen auszuliefern.

### Welcher Unschärfewert sieht für Milchglas am besten aus?

Zwischen 8px und 20px passt zu den meisten Interfaces. Ergänze `saturate()` über 100 %, um die Farbe zurückzuholen, die die Unschärfe wegnimmt.