# Unscharfer Hintergrund: Weichzeichnung richtig eingesetzt

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

Unschärfe schiebt einen Hintergrund nach hinten, damit das Motiv oder die Worte nach vorn kommen. Zu wenig wirkt zufällig, zu viel an der falschen Stelle wirkt billig. So beurteilst du es.

## The short version

- Ein unscharfer Hintergrund nimmt Detail weg, sodass das Motiv oder der Text davor zum klaren Fokus wird.
- Unschärfe funktioniert am besten, wenn sie entweder dezent ist, wie die geringe Schärfentiefe eines Objektivs, oder stark genug, um den Hintergrund in weiche Farbe zu verwandeln, und wirkt dazwischen zufällig.
- Ein stark verwischtes Foto wird zu einem Farbverlauf aus seinen eigenen Farben, ein schneller Weg zu einem Hintergrund, der zu einem Bild passt.
- Verwischte Bilder zeigen oft Banding und verblasste Ränder, was ein wenig Körnung und eine leichte Vergrößerung beheben.
- Ein Farbverlauf aus den Farben des Fotos, ein dunkler Schleier oder eine einfarbige Fläche kann dieselbe Aufgabe wie Unschärfe mit mehr Kontrolle erfüllen.

Ein **unscharfer Hintergrund** nimmt Detail weg, damit etwas anderes führen kann: ein Gesicht in einem Porträt, ein Produkt auf einem Shopfoto, eine Überschrift auf einem Post, eine Fläche in einem Interface. Unschärfe funktioniert, weil das Auge zu dem geht, was am schärfsten ist. Die Kunst liegt in der Menge. Ein wenig Unschärfe sieht aus wie ein Objektiv, viel macht aus dem Hintergrund weiche Farbe, und das Mittelfeld wirkt meist wie eine Kamera, die den Fokus verfehlt hat.

## Wann ein unscharfer Hintergrund hilft

- **Ein Motiv freistellen.** Porträts und Produktfotos lesen sich klarer, wenn der Hintergrund weich ist, wie bei einem Objektiv mit weit offener Blende.
- **Platz für Worte schaffen.** Text über einem unscharfen Foto ist leichter lesbar als Text über einem scharfen, detailreichen.
- **Ein Format füllen.** Ein Querformatfoto in einer vertikalen Story braucht darüber und darunter etwas. Eine unscharfe, vergrößerte Kopie desselben Fotos füllt den Platz in passender Farbe.
- **Geschichtete Interfaces.** Milchglas-Flächen verwischen, was dahinterliegt, sodass die Fläche als eigene Ebene wirkt und trotzdem den Inhalt darunter andeutet.
- **Privatsphäre bei Anrufen.** Videocall-Apps verwischen den Raum hinter dir, damit die Aufmerksamkeit bei deinem Gesicht bleibt.

- Foto 1200×900 (4:3): 1200 × 900
- Story 1080×1920: 1080 × 1920

Ein 4:3-Foto in einer Story lässt große leere Streifen. Eine unscharfe, vergrößerte Kopie des Fotos dahinter füllt sie in den eigenen Farben des Fotos.

## Wie viel Unschärfe du nutzen solltest

| Stärke | Wie es aussieht | Nutze sie für |
| --- | --- | --- |
| Leicht | Hintergrund erkennbar, weich unscharf | Porträts, Produktfotos, natürliche Tiefe |
| Mittel | Formen verschmiert, aber noch erkennbar | Selten: wirkt meist wie ein Fokusfehler |
| Stark | Formen weg, nur weiche Farbflächen | Hinter Text, Formatfüllungen, Ambient-Hintergründe |

Entscheide dich für leicht oder stark. In der Mitte wirkt Unschärfe unbeabsichtigt.

Die Stärke der Unschärfe ist relativ zur Bildgröße: Derselbe Radius, der ein Foto mit 4.000 Pixeln kaum weichzeichnet, löst eines mit 600 Pixeln auf. Beurteile sie mit dem Auge in der Größe, in der Leute es sehen. Geh bei Textuntergründen so weit, dass hinter den Buchstaben keine Kanten bleiben, denn halb verwischte Formen konkurrieren weiter mit den Worten. [Text über Bildern](https://gradiently.design/de/guide/text-over-image) erklärt warum.

## Ein unscharfes Foto ist ein Farbverlauf in Verkleidung

Verwische ein Foto stark, und was bleibt, ist seine Farbe, in weiche Flächen verteilt: Ein Sonnenuntergang wird zu einem Übergang von Orange zu Violett, ein Wald wird zu tiefem Grün mit blassem Himmel oben. Deshalb sind unscharfe Fotos so natürliche Hintergründe für die Bilder, aus denen sie stammen. Es ist auch ein Hinweis: Du könntest diesen Farbverlauf direkt bauen und bekämst dieselbe Harmonie, schärfere Kontrolle und keine Kompressionsartefakte.

- Sonnenuntergangsfoto, ganz unscharf: `linear-gradient(180deg, #312e81, #9d174d 45%, #f97316 75%, #fde68a)`
- Waldfoto, ganz unscharf: `linear-gradient(180deg, #e0f2fe, #86efac 35%, #166534 70%, #052e16)`
- Kerzenlichttisch, ganz unscharf: `radial-gradient(ellipse at 50% 40%, #fcd34d, #b45309 45%, #1c1917 85%)`

Was starke Unschärfe zurücklässt: die Farbpalette des Fotos als Farbverlauf. Sie direkt zu bauen ergibt sauberere Ergebnisse.

Wie du die Farbpalette aus einem Foto ziehst, steht in [Farbpalette aus einem Bild](https://gradiently.design/de/guide/color-palette-from-image). In Gradiently macht [Bild abgleichen](/forge/match) das in einem Schritt: Zieh ein Bild hinein, und du bekommst seine Farbpalette und die nächstliegenden Marks oder neue in seinem Sinne.

## Die üblichen Probleme mit Unschärfe beheben

1. **Vergrößere, um verblasste Ränder zu verstecken** Unschärfe zieht Transparenz oder dunkle Pixel von außerhalb des Bildes herein, sodass Ränder blass oder grau werden. Skaliere die verwischte Kopie leicht über den Rahmen hinaus, damit ihre weichen Ränder abgeschnitten werden.
2. **Füge Körnung hinzu, um Banding zu stoppen** Ein stark verwischtes Bild besteht aus langsamen, glatten Verläufen, die als 8-Bit-JPEG oder -PNG gespeichert Stufen zeigen. Eine leichte Körnungsebene versteckt die Stufen, siehe [Gradient Banding](https://gradiently.design/de/guide/gradient-banding).
3. **Dunkle ab oder hellt auf für Text** Unschärfe entfernt Detail, aber nicht Helligkeit. Hat Text weiter Mühe, lege einen dunklen oder hellen Schleier über die Unschärfe, bis der Kontrast hält.
4. **Halte die Sättigung lebendig** Unschärfe mittelt Farben zusammen, was sie dämpfen kann. Eine kleine Sättigungserhöhung nach dem Verwischen bringt die Farbe zurück.

## Unscharfe Hintergründe in CSS

Im Web gibt es zwei Werkzeuge. `filter: blur()` verwischt ein Element, was zu einer unscharfen Kopie eines Bildes hinter dem echten passt. `backdrop-filter: blur()` verwischt alles, was hinter einem Element liegt, und macht damit Milchglas-Flächen. Beide kosten Renderzeit, und `backdrop-filter` über scrollendem Inhalt kostet am meisten, siehe [Performance von CSS-Farbverläufen](https://gradiently.design/de/guide/css-gradient-performance).

```css
/* a blurred, enlarged copy of the cover image fills the frame */
.cover {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cover-image) center / cover;
  filter: blur(40px) saturate(1.2);
  transform: scale(1.15); /* crops the faded edges */
}

/* a frosted glass panel */
.panel {
  background: rgb(255 255 255 / 0.12);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
```

Setze `--cover-image` am Element auf die `url()` des Bildes. Das Skalieren versteckt die blassen Ränder, die die Unschärfe erzeugt.

Milchglas-Flächen über farbigen Hintergründen sind die Grundlage von [Glassmorphism](https://gradiently.design/de/guide/glassmorphism), das eigene Regeln für Kontrast und Rahmen hat.

## Alternativen zur Unschärfe

### Unschärfe

- Behält die Farben des Fotos automatisch
- Kann Banding zeigen, an Rändern verblassen und Farbe dämpfen
- Variiert hinter Text weiter in der Helligkeit
- Kostet Renderzeit, wenn sie live im Web läuft

### Ein gestalteter Farbverlauf

- Nutzt die Farbpalette des Fotos, bewusst gewählt
- Sauber, mit Körnung, wo nötig
- Ruhige, gleichmäßige Fläche genau hinter dem Text
- Ein paar Byte CSS oder ein scharfer Export

Ein dunkler Schleier, eine einfarbige Fläche hinter den Worten oder eine [Duotone](https://gradiently.design/de/guide/duotone-effect)-Behandlung des Fotos sind die anderen üblichen Wege. Unschärfe ist am schnellsten, ein gestalteter Hintergrund meist am kontrolliertesten.

## FAQ

### Wann sollte ich einen unscharfen Hintergrund nutzen?

Wenn etwas davor führen muss: ein Motiv in einem Foto, Worte auf einem Post, eine Fläche in einem Interface oder ein Foto in einem Format, das es nicht füllt.

### Wie stark sollte ich einen Hintergrund verwischen?

Entweder leicht, sodass es wie natürliche Schärfentiefe aussieht, oder stark, sodass nur weiche Farbe bleibt. Mittlere Unschärfe wirkt meist wie ein Fokusfehler.

### Warum hat mein unscharfer Hintergrund graue Ränder?

Unschärfe zieht leere oder dunkle Pixel von außerhalb des Bildes herein. Vergrößere die verwischte Ebene leicht über den Rahmen hinaus, damit diese Ränder abgeschnitten werden.

### Warum sieht mein unscharfer Hintergrund gestuft aus?

Glatte, langsame Verläufe zeigen beim Speichern in 8-Bit-Formaten Banding. Füge vor dem Export eine dezente Körnungsebene hinzu.

### Wie verwische ich einen Hintergrund in CSS?

Nutze `filter: blur()` an einer Kopie des Bildes hinter dem Inhalt oder `backdrop-filter: blur()` an einer Fläche, um alles dahinter zu verwischen.