Blend Modes

Zuletzt aktualisiert am 15. Februar 2026

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.

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

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

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

Blend-Modes Übersicht

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

Text-Bild-Blend

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;
}

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;
}

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;
}

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;
}

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

  • 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

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

ClientUnterstützungHinweise
ChromeKomplett—
FirefoxKomplett—
SafariKomplett—
EdgeKomplett—
OperaKomplett—

Email-Kompatibilität

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

ClientUnterstützungHinweise
Apple MailTeilweiseGrundlegender Support für mix-blend-mode
GmailKeineBlend Modes werden entfernt
OutlookKeineKein Support
ThunderbirdTeilweiseGrundlegender Support
Yahoo MailKeineKein Support

Verwandte Eigenschaften

opacity filter background-grundlagen

Bleib auf dem Laufenden

Erhalte neue Inhalte direkt in dein Postfach

Mit der Anmeldung akzeptierst du unsere Datenschutzerklärung. Du kannst dich jederzeit über den Link in den E-Mails wieder abmelden.

Was erwartet dich?

Neue Artikel & Videos

Wenn ich was Neues veröffentliche, erfährst du's hier zuerst.

Plattform & Kurs-Updates

Neue Kurse, Referenz-Updates und gelegentlich Sonderpreise zum Launch.

Einmal die Woche in deinem Postfach

Kurz, auf den Punkt, kein Spam.