# Verlaufsüberlagerungen: Fotos tönen, ohne sie zu verstecken

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

Ein gutes Overlay verändert die Stimmung eines Fotos und gibt deinen Worten Halt, während das Bild durchscheint. Ein schlechtes macht aus jedem Bild dasselbe trübe Rechteck. So unterscheidest du sie.

## The short version

- Eine Verlaufsüberlagerung ist eine Farbschicht, die über ein Foto ausläuft und dazu dient, das Bild zu tönen, eine Stimmung zu setzen oder einen ruhigeren Bereich für Text zu schaffen.
- Das häufigste Overlay ist ein Scrim: an einem Rand transparent und am anderen dunkel, sodass nur der Teil des Fotos hinter den Worten abgedunkelt wird.
- Ein Farbschleier nutzt Markenfarben mit Teildeckkraft, oft mit einem Mischmodus wie Multiplizieren, Negativ multiplizieren oder Farbe, damit das Foto seine Details behält.
- Overlays wirken am besten, wenn sie nur den Bereich abdecken, der Hilfe braucht, statt das ganze Bild gleichmäßig abzudunkeln.
- Muss ein Scrim an seinem dunkelsten Rand über etwa 80 Prozent Deckkraft gehen, bevor der Text lesbar ist, wähl ein ruhigeres Foto oder verschieb die Worte.

Eine **Verlaufsüberlagerung** ist eine Farbschicht, die über ein Foto ausläuft, obenauf gelegt, um es zu tönen, eine Bildserie zu vereinheitlichen oder eine Überschrift lesbar zu machen. Der Trick ist der Verlauf: Ein Teil des Fotos wird stark berührt, der Rest kaum. Deshalb wirkt eine Verlaufsüberlagerung durchdacht, wo ein flacher schwarzer Kasten mit 50 Prozent wie eine Notlösung aussieht. Du bestimmst, wo die Farbe landet, wie stark sie wird und wie sie sich mit dem Bild darunter mischt.

## Vier Arten von Verlaufsüberlagerungen

Fast jedes Overlay, das du auf einer Website, einem Plakat oder einem Post siehst, gehört zu einer von vier Arten. Wer weiß, welche er braucht, spart sich viel Gefummel an Deckkraftreglern.

| Overlay | Was es tut | Nutze es für |
| --- | --- | --- |
| Scrim | Von transparent zu dunkel über einen Rand | Überschriften und Bildunterschriften auf unruhigen Fotos |
| Farbschleier | Markenfarben mit Teilstärke über dem ganzen Bild | Damit unzusammenhängende Fotos wie ein Set wirken |
| Duotone oder Verlaufsumsetzung | Ersetzt die Farben des Fotos durch zwei oder mehr deiner eigenen | Kräftige, grafische Looks; siehe [den Duotone-Effekt](https://gradiently.design/de/guide/duotone-effect) |
| Vignette | Dunkelt die Ecken mit einem radialen Verlauf ab | Den Blick zur Mitte ziehen |

Die vier Overlay-Familien. Die meisten Designs brauchen nur eine davon, nicht alle vier.

## Der Scrim: ein Overlay für Text

Der Scrim ist das Arbeitspferd. Er beginnt völlig transparent und wird zum Rand hin dunkler, an dem deine Worte stehen, meist unten oder links. Das Foto bleibt dort unberührt, wo das Motiv ist, und der Text bekommt einen ruhigen, dunklen Boden. Nimm einen dunklen Ton aus dem Foto selbst statt reinem Schwarz: ein tiefes Braun über einem warmen Interieur, ein Marineblau über einer Meereslandschaft. Reines Schwarz sieht aus wie ein Schmierfleck.

- Scrim unten, Marineblau: `linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.5) 75%, rgba(10, 12, 20, 0.8) 100%)`
- Scrim links, warmes Braun: `linear-gradient(90deg, rgba(28, 18, 12, 0.8) 0%, rgba(28, 18, 12, 0.45) 35%, rgba(28, 18, 12, 0) 65%)`
- Vignette: `radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 45%, rgba(8, 8, 14, 0.7) 100%)`

Drei Overlays für sich, bevor ein Foto darunterkommt. Jedes bleibt dort klar, wo das Motiv wäre.

Die oberen 40 Prozent des unteren Scrims sind völlig klar, was Gesichter und Produkte hell hält. Die Dunkelheit baut sich in der unteren Hälfte auf und erreicht ihren Höhepunkt ganz am Rand, genau dort, wo eine Bildunterschrift sitzt. Mehr Wege, Worte auf Bildern lesbar zu halten, findest du in [lesbarer Text auf Fotos](https://gradiently.design/de/guide/readable-text-on-photos).

## Farbschleier und Mischmodi

Mit einem Farbschleier lassen Marken Stockfotos, Handybilder und Eventfotos wie eine Familie aussehen. Leg einen Verlauf aus zwei Markenfarben über das Foto und ändere seinen Mischmodus. Der Mischmodus entscheidet, wie sich die Farbe mit dem Bild mischt, und er zählt mehr als die Farben.

| Mischmodus | Wirkung auf das Foto | Gut mit |
| --- | --- | --- |
| Normal | Deckt das Foto mit der eingestellten Deckkraft ab | Scrims hinter Text |
| Multiplizieren | Dunkelt ab und tönt; Weiß nimmt die Overlay-Farbe an | Hellen, luftigen Fotos |
| Negativ multiplizieren | Hellt auf und tönt; Schwarz nimmt die Overlay-Farbe an | Dunklen, stimmungsvollen Fotos |
| Farbe | Behält Licht und Schatten des Fotos, tauscht seine Farbtöne | Einer kräftigen einzelnen Markentönung |
| Weiches Licht | Sanfter Kontrast und Tönung | Feinen Schleiern auf Porträts |

Mischmodi gibt es in CSS, Figma, Photoshop und den meisten Design-Tools; in CSS heißen sie multiply, screen, color und soft-light.

Schleier von Violett zu Koralle: `linear-gradient(135deg, rgba(124, 58, 237, 0.7) 0%, rgba(236, 72, 153, 0.55) 55%, rgba(251, 146, 60, 0.45) 100%)`

Ein dreifarbiger Schleier mit abnehmender Deckkraft. Mit Multiplizieren über einem blassen Foto wirkt er wie eine warme violette Dämmerung; mit Negativ multiplizieren über einem dunklen leuchtet er.

## So legst du eine Verlaufsüberlagerung über ein Foto

1. **Entscheiden, wofür das Overlay da ist** Text, Stimmung oder Einheitlichkeit. Ein Scrim für Text, ein Schleier für Stimmung und Einheitlichkeit. Wenn du es nicht sagen kannst, brauchst du vermutlich keins.
2. **Einen dunklen Ton aus dem Foto aufnehmen** Nimm für einen Scrim die tiefste Farbe, die schon im Bild ist, oder zwei Markenfarben für einen Schleier.
3. **Den Verlauf über den Bereich legen, der ihn braucht** Fang klar über dem Motiv an und bau zum Rand mit den Worten hin auf. Halte den Übergang lang, damit keine Linie sichtbar ist.
4. **Einen Mischmodus wählen** Normal für Scrims, Multiplizieren für helle Fotos, Negativ multiplizieren für dunkle, Farbe für eine einzelne Tönung.
5. **Die Deckkraft senken, bis es fast verschwindet** Dann einen Schritt zurück nach oben. Die besten Overlays bemerkt man erst, wenn man sie ausschaltet.
6. **Den Text in Handygröße prüfen** Verkleinere das Design auf die Größe, in der man es sieht, und lies jedes Wort. Kontrast, der auf einem Monitor funktioniert, kann auf einem Handy versagen; [Farbkontrast](https://gradiently.design/de/guide/color-contrast-accessibility) hat die Zielwerte.

## Wie dunkel eine Verlaufsüberlagerung sein sollte

### Versteckt das Foto

- Eine flache schwarze Schicht mit 50 Prozent über allem
- Dasselbe Overlay auf jedem Bild, egal bei welchem Licht
- Reines Schwarz oder Grau, das Haut und Essen stumpf macht
- Eine harte Kante, wo der Verlauf endet
- Ein Overlay so stark, dass das Foto alles sein könnte

### Tönt das Foto

- Klar über dem Motiv, dunkler nur hinter Worten
- Stärke pro Foto angepasst
- Ein dunkler Ton aus dem Bild oder der Marke
- Ein langer, allmählicher Übergang ohne Linie
- Das Foto ist auf einen Blick erkennbar

Als Arbeitsgrenze gilt: Muss der dunkelste Rand eines Scrims über etwa 80 Prozent gehen, bevor der Text lesbar ist, ist das Foto an dieser Stelle zu unruhig. Verschieb die Worte, schneide anders zu oder wähl ein ruhigeres Bild. Ein Schleier über dem ganzen Bild braucht weit weniger, sonst sieht das Foto nicht mehr wie ein Foto aus.

## Verlaufsüberlagerungen auf einer Website

Im Web kannst du Overlay und Foto in einer Deklaration stapeln, was sie zusammenhält, wenn sich das Bild ändert. Das Overlay kommt zuerst, weil CSS die erste Ebene obenauf malt. Alle Techniken, einschließlich Mischmodi und Pseudo-Elementen, stehen in [Verlaufsüberlagerung mit CSS](https://gradiently.design/de/guide/css-gradient-overlay).

```css
.hero {
  min-height: 70vh;
  background-image:
    linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.8) 100%),
    url("/images/harbour.jpg");
  background-size: cover;
  background-position: center;
  color: #ffffff;
}
```

Ein unterer Scrim über einem Hero-Foto. Tausch das Bild, und das Overlay bleibt.

## Ein Schleier, der jedes Mal zu deiner Marke passt

Overlays driften auseinander, wenn jeder Designer eigene Farben wählt. Im Studio von Gradiently lassen sich Fotos in den Farben deines Marks tönen, als Mono, Duotone oder Schleier, sodass Bilder aus verschiedenen Quellen eine Palette teilen, ohne dass du von Hand abgleichst. Und wenn Worte auf einem Mark statt auf einem Foto stehen, beruhigt er den Bereich dahinter von selbst, ganz ohne Overlay. Wie der Schleier funktioniert, steht in [Duotone-Fotos in den Farben deines Marks](https://gradiently.design/de/guide/photo-duotone-in-mark-colours).

Ein Immobilien-Post, bei dem die Überschrift Neu im Angebot auf dem unruhigsten Teil des Hintergrunds sitzt

Ohne Hilfe läuft die unruhigste Farbe direkt durch die Überschrift.

Derselbe Immobilien-Post mit einem ruhigeren, tieferen Bereich hinter der Überschrift, sodass jede Zeile lesbar ist

Reagiert der Mark, beruhigt sich der Bereich hinter den Worten, genau die Aufgabe, die sonst ein Scrim übernimmt.

## FAQ

### Was ist eine Verlaufsüberlagerung?

Eine Farbschicht, die über ein Bild ausläuft und obenauf liegt, um es zu tönen, eine Stimmung zu setzen oder Text leichter lesbar zu machen. Anders als ein flaches Overlay ändert sich ihre Stärke über das Bild.

### Welche Deckkraft sollte ein Foto-Overlay haben?

So wenig, wie nötig ist, damit der Text lesbar ist: oft 50 bis 80 Prozent am dunkelsten Rand eines Scrims und viel weniger für einen Schleier über dem ganzen Foto. Brauchst du mehr, ist das Foto an dieser Stelle vermutlich zu unruhig.

### Welcher Mischmodus ist am besten für ein Farb-Overlay?

Multiplizieren passt zu hellen Fotos, Negativ multiplizieren zu dunklen, und Farbe tauscht die Farbtöne des Fotos, während Licht und Schatten bleiben. Nutz Normal für Scrims hinter Text.

### Sollte ich Schwarz für eine Verlaufsüberlagerung nehmen?

Meist nicht. Ein tiefer Ton aus dem Foto, etwa ein dunkles Marineblau oder Braun, dunkelt das Bild ab, ohne es stumpf wirken zu lassen.

### Wie lege ich in CSS eine Verlaufsüberlagerung an?

Schreib in `background-image` zuerst den Verlauf und dann das Bild, zum Beispiel `linear-gradient(...), url(photo.jpg)`. Die erste Ebene wird obenauf gemalt.