Blend Modes

Blend Modes bestimmen, wie sich die Farben eines Elements mit den darunterliegenden Farben mischen. mix-blend-mode mischt ein Element mit seinem Hintergrund (allem was darunter liegt), während background-blend-mode die verschiedenen Hintergrundebenen eines Elements untereinander mischt. Aus Photoshop und Illustrator bekannte Modi wie multiply, screen oder overlay sind direkt in CSS verfügbar. Mit isolation kontrollierst du, ob ein Element einen neuen Stacking-Context bildet und sich damit vom Blending mit darunterliegenden Elementen abkapselt.

Steckbrief Blend Modes

Syntax: mix-blend-mode: <blend-mode>
Initialwert: normal
Vererbt: Nein
Animierbar: Nein

Kategorie: Transformationen
Werte: 16
Beispiele: 2
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 15.02.2026

Grundlagen

Blend Modes berechnen für jeden Pixel, wie die Farbe des Elements mit der darunterliegenden Farbe kombiniert wird. Der Algorithmus hängt vom gewählten Modus ab: multiply multipliziert die Farbwerte und erzeugt dunklere Ergebnisse, screen invertiert, multipliziert und invertiert zurück für hellere Ergebnisse, overlay kombiniert beides je nach Helligkeit.

mix-blend-mode wirkt auf das gesamte Element einschließlich Text, Borders und Kinder. Es mischt mit allem, was im Stacking-Context darunter liegt. background-blend-mode wirkt nur innerhalb eines Elements und mischt dessen Hintergrundebenen (Farbe, Bilder, Gradienten) miteinander.

isolation: isolate auf einem Container erzeugt einen neuen Stacking-Context. Kind-Elemente mit mix-blend-mode mischen dann nur noch innerhalb dieses Containers, nicht mit dem gesamten Seitenhintergrund. Das gibt dir Kontrolle darüber, wie weit das Blending reicht.

Syntax & Werte

16 Werte

Blend-Modi (Abdunkelnd)

Wert	Beschreibung	Beispiel
`normal`	Keine Mischung, oberes Element verdeckt unteres. (Standard)	mix-blend-mode: normal;
`multiply`	Multipliziert Farbwerte. Ergebnis immer dunkler. Weiß verschwindet.	mix-blend-mode: multiply;
`darken`	Nimmt pro Kanal den dunkleren Wert.	mix-blend-mode: darken;
`color-burn`	Erhöht Kontrast durch Abdunklung. Sehr dramatischer Effekt.	mix-blend-mode: color-burn;

Blend-Modi (Aufhellend)

Wert	Beschreibung	Beispiel
`screen`	Invertiert, multipliziert, invertiert zurück. Ergebnis immer heller. Schwarz verschwindet.	mix-blend-mode: screen;
`lighten`	Nimmt pro Kanal den helleren Wert.	mix-blend-mode: lighten;
`color-dodge`	Hellt auf und erhöht Kontrast. Sehr hell und leuchtend.	mix-blend-mode: color-dodge;

Blend-Modi (Kontrastierend)

Wert	Beschreibung	Beispiel
`overlay`	Kombiniert multiply und screen basierend auf der Helligkeit des Hintergrunds.	mix-blend-mode: overlay;
`soft-light`	Wie overlay, aber subtiler. Sanfte Aufhellung oder Abdunklung.	mix-blend-mode: soft-light;
`hard-light`	Wie overlay, aber basierend auf der Vordergrund-Helligkeit. Intensiverer Effekt.	mix-blend-mode: hard-light;

Blend-Modi (Spezial)

Wert	Beschreibung	Beispiel
`difference`	Subtrahiert den dunkleren vom helleren Wert. Gleiche Farben = schwarz.	mix-blend-mode: difference;
`exclusion`	Wie difference, aber mit weniger Kontrast. Sanfterer Effekt.	mix-blend-mode: exclusion;
`hue`	Nimmt den Farbton des Elements, Sättigung und Helligkeit vom Hintergrund.	mix-blend-mode: hue;
`saturation`	Nimmt die Sättigung des Elements, Farbton und Helligkeit vom Hintergrund.	mix-blend-mode: saturation;
`color`	Nimmt Farbton und Sättigung des Elements, Helligkeit vom Hintergrund.	mix-blend-mode: color;
`luminosity`	Nimmt die Helligkeit des Elements, Farbton und Sättigung vom Hintergrund.	mix-blend-mode: luminosity;

Beispiele

2 Beispiele

Die wichtigsten Blend-Modi im direkten Vergleich. Zwei farbige Kreise überlappen sich und zeigen, wie die Farben gemischt werden.

Blend-Modes Übersicht

.circle-red {
  mix-blend-mode: multiply;  /* Dunkler */
  mix-blend-mode: screen;    /* Heller */
  mix-blend-mode: overlay;   /* Kontrast */
  mix-blend-mode: difference; /* Invertiert */
}

<div class="blend-grid">
<div class="blend-item">
  <div class="blend-circles"><div class="c1"></div><div class="c2"></div></div>
  <div class="blend-label">normal</div>
</div>
<div class="blend-item bm-multiply">
  <div class="blend-circles"><div class="c1"></div><div class="c2"></div></div>
  <div class="blend-label">multiply</div>
</div>
<div class="blend-item bm-screen">
  <div class="blend-circles"><div class="c1"></div><div class="c2"></div></div>
  <div class="blend-label">screen</div>
</div>
<div class="blend-item bm-overlay">
  <div class="blend-circles"><div class="c1"></div><div class="c2"></div></div>
  <div class="blend-label">overlay</div>
</div>
<div class="blend-item bm-darken">
  <div class="blend-circles"><div class="c1"></div><div class="c2"></div></div>
  <div class="blend-label">darken</div>
</div>
<div class="blend-item bm-lighten">
  <div class="blend-circles"><div class="c1"></div><div class="c2"></div></div>
  <div class="blend-label">lighten</div>
</div>
<div class="blend-item bm-difference">
  <div class="blend-circles"><div class="c1"></div><div class="c2"></div></div>
  <div class="blend-label">difference</div>
</div>
<div class="blend-item bm-hard-light">
  <div class="blend-circles"><div class="c1"></div><div class="c2"></div></div>
  <div class="blend-label">hard-light</div>
</div>
</div>

Text mit mix-blend-mode über einem Bild erzeugt einen Effekt, bei dem der Text die Farben des Hintergrunds aufnimmt.

Text mit Blend Mode

.hero-background {
  background: linear-gradient(135deg, #1a56db, #7c3aed, #ec4899);
}

.hero-title {
  color: white;
  mix-blend-mode: overlay;
}

<div class="text-blend-demo">
<h2>BLEND</h2>
<p>mix-blend-mode: overlay</p>
</div>

Duotone-Effekt

background-blend-mode mischt ein Hintergrundbild mit einer Farbe für einen Duotone-Look, beliebt bei Hero-Sektionen und Thumbnails.

Duotone-Effekte mit background-blend-mode

.duotone-blue {
  background-image: url("foto.jpg");
  background-color: #1a56db;
  background-blend-mode: multiply;
}

.duotone-pink {
  background-image: url("foto.jpg");
  background-color: #ec4899;
  background-blend-mode: screen;
}

<div class="duotone-demo">
<div class="duotone-wrap">
  <div class="duotone-box dt-blue">multiply</div>
  <div class="duotone-label">Blau Duotone</div>
</div>
<div class="duotone-wrap">
  <div class="duotone-box dt-pink">screen</div>
  <div class="duotone-label">Pink Duotone</div>
</div>
<div class="duotone-wrap">
  <div class="duotone-box dt-green">overlay</div>
  <div class="duotone-label">Grün Duotone</div>
</div>
</div>

Dark-Overlay

Ein halbtransparentes Element mit mix-blend-mode: multiply erzeugt einen natürlich wirkenden Abdunklungs-Effekt, besser als einfache Opacity, weil Farben erhalten bleiben.

Dark-Overlay Vergleich

/* Standard-Overlay (flach, wäscht Farben aus) */
.overlay-simple {
  background: rgba(0, 0, 0, 0.5);
}

/* Multiply-Overlay (Farben bleiben erhalten) */
.overlay-multiply {
  background: rgba(30, 41, 59, 0.7);
  mix-blend-mode: multiply;
}

<div class="overlay-demo">
<div class="overlay-wrap">
  <div class="overlay-box ov-normal"><div class="overlay-layer">opacity</div></div>
  <div class="overlay-label">rgba Overlay</div>
</div>
<div class="overlay-wrap">
  <div class="overlay-box ov-multiply"><div class="overlay-layer">multiply</div></div>
  <div class="overlay-label">multiply Overlay</div>
</div>
</div>

isolation-Demo

isolation: isolate begrenzt das Blending auf den Container. Ohne Isolation mischt sich das Element mit dem gesamten Hintergrund, hier dem orangen Gradient. Mit Isolation bleibt das Blau unverändert, weil multiply nur innerhalb des isolierten Containers wirkt.

isolation: isolate (Hintergrund = oranger Gradient)

.page {
  background: linear-gradient(135deg, #fbbf24, #f97316);
}

/* Ohne isolation: multiply mischt Blau mit dem Gradient */
.container {
  /* kein eigener Hintergrund → Blend reicht durch */
}

/* Mit isolation: Blending stoppt am Container */
.container-isolated {
  isolation: isolate;
}

.element {
  background: #1a56db;
  mix-blend-mode: multiply;
}

<div class="iso-demo">
<div class="iso-wrap">
  <div class="iso-container"><div class="iso-element">Blend</div></div>
  <div class="iso-label">Ohne isolation</div>
</div>
<div class="iso-wrap">
  <div class="iso-container isolated"><div class="iso-element">Blend</div></div>
  <div class="iso-label">Mit isolation</div>
</div>
</div>

Barrierefreiheit

Blend Modes können die Lesbarkeit von Text erheblich beeinträchtigen. Wenn Text mit dem Hintergrund geblendet wird, hängt der tatsächliche Kontrast von den darunterliegenden Farben ab. Das macht es schwer, das WCAG-Kontrastverhältnis von 4.5:1 zuverlässig einzuhalten. Teste geblendetem Text immer mit verschiedenen Hintergrundfarben.

Nutzer im Hochkontrast-Modus (Windows) sehen möglicherweise andere Ergebnisse, weil der Hochkontrast-Modus die Farben überschreibt und damit die Blend-Berechnung verändert. Verlass dich nicht auf Blending für die Vermittlung wichtiger Informationen.

Blend-Effekte können bei bestimmten Farbkombinationen flimmern oder pulsierende Effekte erzeugen. Teste auf Lichtempfindlichkeit, besonders bei difference und exclusion, die zu hohen Kontrastsprüngen führen können.

Häufige Fehler

5 Punkte

mix-blend-mode ohne Hintergrund am Container. Wenn kein Element darunter liegt, mischt sich das Element mit dem weißen Seitenhintergrund, oft nicht der gewünschte Effekt.
background-blend-mode und mix-blend-mode verwechseln. background-blend-mode mischt nur die eigenen Hintergrundebenen, mix-blend-mode mischt mit allem darunter.
isolation: isolate vergessen bei verschachtelten Blend-Effekten. Ohne Isolation brechen Blend-Modi aus ihrem Container aus und mischen mit unbeabsichtigten Elementen.
Blend Modes auf Text in Hero-Sektionen ohne Fallback. Wenn das Hintergrundbild nicht lädt, kann der geblendet Text unleserlich werden. Setze immer eine background-color als Fallback.
Performance-Problem bei vielen Elementen mit mix-blend-mode. Jedes geblendet Element muss den Compositing-Schritt des Browsers durchlaufen. Bei Hunderten von Elementen kann das spürbar ruckeln.

Browser-Kompatibilität

5 von 5

mix-blend-mode, background-blend-mode und isolation werden von allen modernen Browsern vollständig unterstützt.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

Blend Modes werden in HTML-Emails nicht unterstützt.

Apple Mail

Teilweise

Grundlegender Support für mix-blend-mode
Gmail

Keine

Blend Modes werden entfernt
Outlook

Keine

Kein Support
Thunderbird

Teilweise

Grundlegender Support
Yahoo Mail

Keine

Kein Support

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da