Blend Modes

CSS Blend Modes verrechnen die Farben zweier Ebenen pixelweise miteinander – Effekte, für die man sonst Photoshop oder Figma bräuchte, direkt im Browser. Kein Bild-Export, keine zusätzliche Datei, nur CSS.

Zwei Properties, ein Prinzip

Beide Eigenschaften nutzen dieselben Blend-Modi (multiply, screen, difference ...) – der Unterschied liegt darin, was miteinander verrechnet wird:

mix-blend-modeMischt ein Element mit dem, was dahinter liegt – andere Elemente, Seitenhintergrund
background-blend-modeMischt mehrere Hintergrundebenen innerhalb desselben Elements miteinander

Wie Blend Modes rechnen

Für jeden Pixel werden zwei Farben kombiniert: die Base Color (was darunter liegt) und die Blend Color (das blendende Element). Am einfachsten versteht man das an den Extremen Schwarz und Weiss:

multiply + Weiss

multiply + Schwarz

screen + Weiss

screen + Schwarz

multiplyDunkelt ab – Weiss ist neutral (keine Änderung), Schwarz ergibt immer Schwarz
screenHellt auf – Schwarz ist neutral (keine Änderung), Weiss ergibt immer Weiss

Wichtig: Ohne sichtbaren Hintergrund gibt es keine Base Color – und damit auch nichts zu mischen. Ein Blend-Mode über transparentem Grund bleibt wirkungslos.

mix-blend-mode

Typischer Einsatz: Text, der sich automatisch an einen wechselnden Hintergrund anpasst, statt fest auf eine Farbe gesetzt zu sein.

Blend

.bg {
    background: linear-gradient(120deg, darkblue, darkmagenta, magenta, deeppink);
}

.bg span {
    color: white;
    mix-blend-mode: difference;
}

Bei difference ergibt Weiss über jeder Farbe automatisch deren Komplementärfarbe – der Text bleibt so über dem ganzen Verlauf hinweg lesbar.

background-blend-mode

Mischt mehrere Hintergrundebenen eines einzelnen Elements – andere Elemente auf der Seite bleiben unberührt.

.box {
    background-image:
        linear-gradient(120deg, darkblue, deeppink),
        repeating-linear-gradient(45deg, rgba(0,0,0,.35) 0 10px, transparent 10px 20px);
    background-blend-mode: multiply;
}

Fallstrick: Weisse Streifen würden hier nichts bewirken – multiply mit Weiss ist neutral (siehe oben). Für einen sichtbaren Effekt braucht die zweite Ebene dunklere oder gesättigtere Farben.

Nurse Demo: 16 Blend Modes mit vier Bildtypen im Vergleich.

isolation

isolation: isolate erzeugt einen neuen Stacking-Context und begrenzt, mit was ein Kind-Element mit mix-blend-mode überhaupt mischen kann. Das klassische Beispiel: drei überlappende Farbkreise auf einem Foto.

ohne isolation

mit isolation

.circle {
    mix-blend-mode: screen; /* Rot + Grün + Blau ergeben Weiss */
}

/* Ohne isolation: */
/* Kreise mischen zusätzlich mit dem Foto darunter */

.photo {
    isolation: isolate;
}
/* Mit isolation: Kreise mischen nur untereinander, */
/* das Foto bleibt darunter unangetastet sichtbar */

Links blendet jeder Kreis zusätzlich mit dem Foto darunter – das Ergebnis ist unvorhersehbar und abhängig vom Bildinhalt. Rechts sorgt isolation: isolate dafür, dass die drei Kreise nur miteinander mischen (klassisches additives RGB: Rot+Grün+Blau = Weiss) und als fertige Komposition über dem unveränderten Foto liegen.

Alle Blend Modes im Überblick

Die folgende Übersicht zeigt alle verfügbaren Blend Modes. Die meisten Projekte benötigen jedoch nur wenige davon. In der Praxis werden vor allem multiply, screen, overlay, difference und color häufig verwendet.
Im Playground kannst du alle Blend Modes live ausprobieren und direkt vergleichen.

Grundmodi

normalKein Blending – Standardverhalten ohne Verrechnung
multiplyDunkelt ab, Weiss ist neutral
screenHellt auf, Schwarz ist neutral
overlayKombination aus multiply und screen, abhängig von der Base Color
darkenBehält pro Farbkanal jeweils den dunkleren Wert
lightenBehält pro Farbkanal jeweils den helleren Wert

Kontrast & Licht

soft-lightSanfte Variante von overlay, wie Licht durch einen Diaprojektor
hard-lightKräftigere Variante von overlay, Blend Color bestimmt die Richtung
color-dodgeHellt die Base Color stark auf, kann schnell ausbrennen
color-burnDunkelt die Base Color stark ab, kann schnell absaufen

Spezialeffekte

differenceAbsoluter Farbunterschied – Klassiker für adaptive Text-Kontraste
exclusionÄhnlich difference, aber mit weniger Kontrast
hueÜbernimmt nur den Farbton der Blend Color
saturationÜbernimmt nur die Sättigung der Blend Color
colorÜbernimmt Farbton und Sättigung der Blend Color, Helligkeit bleibt erhalten
luminosityÜbernimmt nur die Helligkeit der Blend Color, Farbe bleibt erhalten

Praktische Beispiele

1. Duotone-Effekt

Ein sehr beliebter Effekt in modernem Webdesign (z.B. Spotify-Playlist-Cover): ein Foto wird zuerst mit filter: grayscale(1) entsättigt, dann bekommt eine farbige Ebene mit mix-blend-mode: color darüber gelegt. Das Ergebnis übernimmt nur Farbton und Sättigung der Ebene, die Helligkeit und der Kontrast des Fotos bleiben erhalten.

.tile {
    position: relative;
}

.tile img {
    filter: grayscale(1) contrast(1.1);
}

.tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, darkblue, deeppink);
    mix-blend-mode: color;
}

Dasselbe Foto, dieselbe Technik – nur der Farbverlauf in ::after ändert sich zwischen den drei Kacheln.

2. Hero-Vignette

Zwei Blend-Effekte gleichzeitig: Ein Farbverlauf von Schwarz zu Transparent mit mix-blend-mode: multiply dunkelt das Foto zum unteren Rand hin ab. Der grosse Titel darüber nutzt mix-blend-mode: overlay und verbindet sich dadurch mit dem Bild, statt einfach weiss darüber zu liegen. Eine Alternative zur Masken-Vignette aus der Mask-Lektion, die dort mit einem weichen Rand statt einer Abdunkelung arbeitet.

Ibiza

.hero {
    position: relative;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, black, transparent 65%);
    mix-blend-mode: multiply;
}

.hero-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: clamp(48px, 12vw, 110px);
    mix-blend-mode: overlay;
}

Der Verlauf dunkelt nur den unteren Bereich ab (dort, wo black steht). Der Titel selbst blendet mit overlay: helle Bildstellen scheinen durch den Text durch, dunkle Stellen bleiben kräftig weiss – der Text wirkt dadurch mit dem Foto verwoben statt nur draufgeklebt.

3. Marker-Effekt

Ein <mark>-Element mit mix-blend-mode: multiply wirkt wie ein echter Textmarker: die Farbe legt sich transparent über den Text, statt ihn mit einer soliden Fläche zu verdecken.

Das ist ein markierter Textabschnitt mitten im Fliesstext, wie mit einem echten Leuchtstift hervorgehoben.

mark {
    background: gold;
    mix-blend-mode: multiply;
    padding: 0 4px;
}

Ohne mix-blend-mode würde die gelbe Fläche den Text einfach solide hinterlegen. Mit multiply bleibt der Text darunter durchgehend sichtbar, ganz wie bei einem physischen Textmarker.

4. PNG mit Transparenz: nur die sichtbaren Pixel blenden

Ein PNG mit Alphakanal verhält sich beim Blend Mode anders als ein vollflächiges Foto: transparente Bereiche bleiben transparent, der Hintergrund scheint dort unverändert durch. Nur die deckenden Pixel mischen sich – hier ein Schwarz-Weiss-Portrait, dessen Freiraum um die Figur herum komplett transparent ist. Weil Schwarz bei screen und Weiss bei multiply neutral sind (siehe Grundprinzip oben), verschwindet je nach Modus eine der beiden Farben fast vollständig.

multiply

screen

.photo {
    background: url('wasser.jpg') center/cover;
}

.photo img {
    mix-blend-mode: multiply; /* Weiss verschwindet, Schwarz dunkelt ab */
    /* oder: mix-blend-mode: screen;   Schwarz verschwindet, Weiss leuchtet */
}

Bei multiply verschmilzt das Weiss der Figur komplett mit dem Foto, nur die schwarzen Flächen bleiben als Silhouette sichtbar. Bei screen ist es umgekehrt: Schwarz verschwindet, Weiss leuchtet kräftig über dem Foto. Der transparente Hintergrund der PNG bleibt in beiden Fällen unangetastet – dort ist schlicht nichts zu blenden.

5. Zwei Fotos übereinander: jeder Pixel mischt mit

Anders als beim PNG oben ist hier jedes Pixel deckend – mix-blend-mode mischt deshalb die ganze Fläche, nicht nur einen Ausschnitt. Zwei sehr unterschiedliche Fotos (eine ruhige Kabel-Nahaufnahme über Wasser) zeigen, wie unterschiedlich die Modi dasselbe Bildpaar interpretieren. Anders als beim Duotone- oder Hero-Vignette-Beispiel oben ist hier keine Ebene ein CSS-Verlauf – beide Bilder werden ganz normal als eigene <img>-Elemente im HTML geladen und liegen per position: absolute exakt übereinander.

overlay

screen

difference

<div class="stack">
    <img src="wasser.jpg" alt="Meer">
    <img class="top" src="kabel.jpg" alt="Kabel">
</div>

.stack {
    position: relative;
}

.stack img {
    position: absolute;
    inset: 0;
}

.stack .top {
    mix-blend-mode: overlay; /* oder: screen / difference */
}

Bei overlay bleibt die Struktur beider Fotos erkennbar, helle und dunkle Bereiche verstärken sich gegenseitig. screen hellt beide Bilder gemeinsam auf – luftiger, aber kontrastärmer. difference berechnet die Farbdistanz jedes Pixelpaars: ähnliche Farben werden fast schwarz, gegensätzliche Farben leuchten grell – ein unruhiger, aber sehr charakteristischer Effekt.

Häufige Fehler

multiply mit Weiss oder screen mit Schwarz eingesetzt – beide sind neutral und bewirken nichts.
multiply und darken sehen auf hellen/weissen Flächen fast identisch aus – rechnerisch gilt dort Cb × Cs = min(Cb, Cs), der Unterschied zeigt sich erst bei farbigen oder dunkleren Ebenen.
Kein sichtbarer Hintergrund vorhanden – ohne Base Color gibt es nichts zu mischen.
Ein Elternelement mit isolation: isolate blockiert unabsichtlich den gewünschten Effekt mit dem Rest der Seite.
opacity < 1 auf dem Elternelement kann zu unerwarteten Ergebnissen führen.
Hohe GPU-Last bei animierten Blend Modes, besonders auf schwächeren Geräten.

Best Practices

Blend Modes sparsam einsetzen – zu viele Effekte gleichzeitig wirken schnell unruhig.
Immer auf hellen und dunklen Hintergründen testen, da sich das Ergebnis stark unterscheidet.
Mehrere blendende Elemente bei Bedarf mit isolation gruppieren, damit sie nicht unkontrolliert mit der ganzen Seite mischen.

Cheat Sheet

mix-blend-modeMischt ein Element mit dem, was dahinter liegt
background-blend-modeMischt mehrere Hintergrundebenen desselben Elements
isolation: isolateBegrenzt Blend-Effekte auf eine Gruppe von Elementen
multiplyDunkelt ab, Weiss neutral
screenHellt auf, Schwarz neutral

Kurz gesagt

mix-blend-mode mischt ein Element mit dem, was dahinter liegt; background-blend-mode mischt mehrere Hintergründe desselben Elements.
multiply dunkelt ab (Weiss neutral), screen hellt auf (Schwarz neutral) – die meisten anderen Modi sind Varianten davon.
isolation: isolate begrenzt, mit was ein Element mischen darf – wichtig, sobald mehrere blendende Elemente als Gruppe zusammengehören sollen.
difference ist der Klassiker, um Text automatisch an wechselnde Hintergründe anzupassen.
Ohne sichtbaren Hintergrund gibt es keine Base Color und damit kein Blending.

Nurse Probier alle Blend Modes live im Blend Modes Playground aus.