Unscharfer Hintergrund: Weichzeichnung richtig eingesetzt

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

Wie viel Unschärfe du nutzen solltest

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

Wie du die Farbpalette aus einem Foto ziehst, steht in Farbpalette aus einem Bild. In Gradiently macht Bild abgleichen 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. 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. 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.

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

/* 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);
}

Milchglas-Flächen über farbigen Hintergründen sind die Grundlage von Glassmorphism, das eigene Regeln für Kontrast und Rahmen hat.

Alternativen zur Unschärfe

Ein dunkler Schleier, eine einfarbige Fläche hinter den Worten oder eine Duotone-Behandlung des Fotos sind die anderen üblichen Wege. Unschärfe ist am schnellsten, ein gestalteter Hintergrund meist am kontrolliertesten.