CSS Blend Modes — mix-blend-mode und background-blend-mode

1. Grundlagen: Wie CSS Blend Modes funktionieren

CSS Blend Modes definieren, wie zwei überlagerte Ebenen visuell miteinander kombiniert werden. Das Konzept stammt direkt aus der Bildbearbeitung — Photoshop-Nutzer kennen Ebenen-Blend-Modes seit Jahrzehnten. Im Browser beschreibt jeder Blend-Mode eine mathematische Formel, die für jeden Pixel die Ausgabefarbe aus der Quellfarbe (das Element) und der Zielfarbe (der Hintergrund dahinter) berechnet. Die 16 standardisierten CSS Blend Modes in der CSS Compositing-Spezifikation sind in Gruppen eingeteilt: Abdunkeln (multiply, darken, color-burn), Aufhellen (screen, lighten, color-dodge), Kontrast (overlay, soft-light, hard-light) und Farbe (hue, saturation, color, luminosity) sowie die speziellen Modi difference und exclusion.

Die Formeln für CSS Blend Modes arbeiten mit normalisierten Pixelwerten zwischen 0.0 und 1.0. Für multiply ist die Formel C = A × B: Zwei 50%-graue Ebenen (0.5 × 0.5 = 0.25) ergeben ein dunkles Grau. Für screen lautet die Formel C = 1 - (1-A)(1-B): Das Inverse des Produkts der Inversen — das Ergebnis ist immer heller als die hellere der beiden Eingaben. Das Verständnis dieser mathematischen Grundlage hilft dabei, CSS Blend Modes vorherzusagen, anstatt sie durch Trial and Error zu entdecken.

2. mix-blend-mode: Element auf Hintergrund blenden

Die Property mix-blend-mode bestimmt, wie ein Element mit dem Hintergrund dahinter gemischt wird. Der Standardwert ist normal — normale Komposition ohne Blending. Jeder andere CSS Blend Mode-Wert aktiviert die entsprechende Mischformel. Das Element kann dabei Text, ein Bild, ein div mit Hintergrundfarbe oder ein beliebiges anderes HTML-Element sein. Die Property wirkt auf das gesamte Element einschließlich aller Inhalte — es gibt keine Möglichkeit, mix-blend-mode nur auf den Hintergrund eines Elements anzuwenden, ohne seinen Inhalt zu beeinflussen.

Ein wichtiger Aspekt von mix-blend-mode ist der Compositing-Kontext. Standardmäßig wird ein Element mit allem darunter im Stacking Context gemischt — also potenziell mit dem gesamten Seitenhintergrund. Das führt manchmal zu unerwünschten Effekten: Ein weißer Text mit mix-blend-mode: multiply auf einem weißen Container ist unsichtbar, weil Weiß × irgendetwas = irgendetwas (Weiß ist die neutrale Farbe für multiply). Hier kommt isolation ins Spiel, das den Compositing-Kontext begrenzt und nur das Blending innerhalb einer definierten Gruppe erlaubt.

/* mix-blend-mode applied to text over an image */
.hero-text-blend {
  /* Text with screen blend mode appears inverted-bright on image */
  mix-blend-mode: screen;
  color: #c4b5fd; /* violet — becomes lighter/glow effect on dark bg */
  font-size: 4rem;
  font-weight: 800;
}

/* Overlay a colored shape over image for tint effect */
.image-tint-overlay {
  position: absolute;
  inset: 0;
  background: rgba(124, 58, 237, 0.7); /* violet */
  mix-blend-mode: multiply; /* darkens underlying image with tint color */
}

/* Exclusion for psychedelic inversion effect */
.invert-text {
  mix-blend-mode: exclusion;
  color: white;
  /* On dark areas: appears light. On light areas: appears dark. */
  /* Exact formula: C = A + B - 2AB */
}

/* Luminosity: take luminance from source, color from background */
.bw-image-over-color {
  mix-blend-mode: luminosity;
  /* Grayscale image acquires background color hues */
}

3. multiply und screen: die Basiseffekte

multiply ist der am häufigsten eingesetzte CSS Blend Mode für Tinting-Effekte. Schwarz bleibt schwarz, Weiß ist transparent, alles dazwischen dunkelt ab. Das Ergebnis ist immer dunkler als die hellere der beiden Eingaben. Ein häufiger Anwendungsfall: Eine farbige Ebene mit mix-blend-mode: multiply über einem Foto färbt das Bild mit der Überlagerungsfarbe, während die Licht- und Schattenstruktur des Fotos erhalten bleibt. Violett über einem Graustufenbild ergibt ein violett getöntes Foto mit dem gleichen Kontrast wie das Original — in Photoshop-Sprache: ein "Duotone" oder "Color Tint".

screen ist das arithmetische Gegenteil von multiply: Weiß bleibt weiß, Schwarz ist transparent, alles dazwischen wird aufgehellt. Das Ergebnis ist immer heller als die hellere der beiden Eingaben. Typischer Anwendungsfall: Feuerflammen, Lichteffekte, Glüheffekte. Ein weißes Feuer-Sprite mit mix-blend-mode: screen über einem Hintergrundbild wird sein Schwarz unsichtbar und zeigt nur die hellen Flammenpixel — ein klassischer VFX-Compositing-Trick. CSS Blend Modes reproduzieren damit direkt, was Filmstudios mit "Screen"-Compositing in After Effects machen.

4. overlay und soft-light: kontrastverstärkende Modi

overlay ist ein kontextabhängiger CSS Blend Mode: Für dunkle Pixel des Hintergrunds verhält er sich wie multiply (verdunkeln), für helle Pixel wie screen (aufhellen). Das erhöht den Kontrast des Hintergrunds und verleiht ihm mehr Plastizität. Die Trennlinie liegt bei 50%-Grau: Pixel über 0.5 werden aufgehellt, darunter abdunkelt. Das erklärt, warum 50%-Grau (#808080) bei overlay vollständig neutral ist — es verändert den Hintergrund nicht. Das ist die neutrale Farbe für overlay.

soft-light ist eine sanftere Version von overlay. Die gleiche Dunkel/Hell-Logik gilt, aber der Effekt ist deutlich subtiler. Statt scharfer Kontrastverstärkung erzeugt soft-light eine weiche Lichtatmosphäre — als würde diffuses Licht auf das Bild fallen. Der Unterschied ist besonders bei Fotografien sichtbar: overlay macht sie knackig und dramatisch, soft-light macht sie warm und atmosphärisch. In der Praxis werden beide CSS Blend Modes für Textur-Overlays eingesetzt: Eine Papier- oder Leinwandtextur mit overlay gibt einem Foto eine dramatische, gealterte Wirkung; mit soft-light entsteht eine subtile organische Anmutung.

/* Duotone effect: grayscale image + two-color gradient via blend modes */
.duotone-wrapper {
  position: relative;
  display: inline-block;
  /* Step 1: Desaturate the image */
  filter: grayscale(100%);
}

.duotone-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Step 2: Gradient from shadow color to highlight color */
  background: linear-gradient(
    135deg,
    #0f172a 0%,   /* shadow tone: dark navy */
    #7c3aed 100%  /* highlight tone: violet */
  );
  /* Step 3: Multiply blend — dark areas get shadow tone, light areas get highlight */
  mix-blend-mode: multiply;
}

/* Texture overlay: adds film grain / paper feel */
.textured-section {
  position: relative;
}

.textured-section::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Noise texture via SVG data URI */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  /* overlay blend — adds contrast texture without color change */
  mix-blend-mode: overlay;
  opacity: 0.4;
  pointer-events: none;
}

5. Farbbasierte Modi: hue, saturation, color, luminosity

Die vier farbbasierten CSS Blend Modes arbeiten im HSL-Farbraum statt mit RGB-Pixelwerten. Sie erlauben es, einzelne Farb-Dimensionen aus zwei Ebenen zu kombinieren. hue nimmt den Farbton (H) aus dem Quellelement und Helligkeit (L) plus Sättigung (S) aus dem Hintergrund. saturation nimmt die Sättigung aus dem Quellelement und Farbton plus Helligkeit aus dem Hintergrund. color kombiniert Farbton und Sättigung aus dem Quellelement mit der Helligkeit des Hintergrunds. luminosity ist das Gegenteil: Helligkeit aus dem Quellelement, Farbton und Sättigung aus dem Hintergrund.

Der praktischste dieser farbbasierten CSS Blend Modes für Webdesign ist color: Er koloriert ein Graustufenbild mit einer Farbe, ohne die Helligkeitsstruktur des Bildes zu verändern. Das ist das klassische "Hand-kolorierter Foto"-Effekt aus Photoshop, in einer CSS-Zeile. luminosity dient dem umgekehrten Zweck: Es überlagert ein farbiges Bild mit einem Schwarzweißfoto, das die Textur und Helligkeit beisteuert, während die Farben des Hintergrunds erhalten bleiben. Diese vier Modi sind in Kombination mit Pseudo-Elementen extrem mächtig für kreative Typographie und Bild-Behandlungen, die traditionell in der Bildbearbeitung stattgefunden hätten.

6. background-blend-mode: mehrere Hintergründe blenden

background-blend-mode ist die zweite CSS Blend Modes-Property und funktioniert anders als mix-blend-mode. Sie definiert, wie mehrere background-Ebenen eines einzelnen Elements miteinander gemischt werden — also die Interaktion zwischen verschiedenen Hintergründen desselben Elements, nicht die Interaktion des Elements mit dem umgebenden Inhalt. CSS unterstützt mehrere kommagetrennte background-Werte; background-blend-mode kann für jede dieser Ebenen einen anderen Blend-Mode definieren.

Das klassische Anwendungsmuster für CSS Blend Modes mit background-blend-mode: Ein Foto als erste Hintergrundbild-Ebene, eine Farbfläche als zweite Ebene (per background-color oder einem linear-gradient zu einer Farbe), und background-blend-mode: multiply oder color. Das ergibt eine getönte Variante des Fotos, ohne die Bilddatei zu modifizieren oder mehrere Elemente zu schachteln. Besonders nützlich ist das für dynamische Farbthemen: Mit Custom Properties kann man die Tint-Farbe zur Laufzeit wechseln und alle Produktfotos erscheinen sofort in der neuen Akzentfarbe.

/* background-blend-mode: image + color tint in single element */
.product-card {
  --tint-color: #7c3aed; /* violet — can be changed via JS for theming */

  background-image:
    linear-gradient(var(--tint-color), var(--tint-color)), /* tint layer */
    url('/images/product.jpg');                              /* photo layer */
  background-blend-mode: multiply; /* tint darkens image in tint color */
  background-size: cover;
  background-position: center;

  /* Theme toggle: change tint color dynamically */
  transition: background-image 0.3s ease;
}

/* Multiple blend modes for multi-layer effects */
.hero-multi-layer {
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(196,181,253,0.6), transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(124,58,237,0.5), transparent 50%),
    url('/images/hero-photo.jpg');
  background-blend-mode:
    screen,    /* first gradient: screened over photo — lightens */
    multiply,  /* second gradient: multiplied — darkens */
    normal;    /* photo: base layer */
  background-size: cover;
}

7. isolation: den Compositing-Kontext begrenzen

Die Property isolation: isolate ist das Gegenstück zu mix-blend-mode und essenziell für den kontrollierten Einsatz von CSS Blend Modes. Ohne isolation werden CSS Blend Modes gegen alles darunter im Stacking Context berechnet — potenziell gegen den gesamten Seitenhintergrund, andere Elemente und sogar gegen Hintergrundbilder des body-Elements. Das führt oft zu unvorhersehbaren Ergebnissen, besonders wenn blend-mode-Elemente in Komponenten leben, die in verschiedenen Kontexten eingesetzt werden.

Mit isolation: isolate auf einem Container-Element werden alle CSS Blend Modes von Kindelementen nur innerhalb dieses Containers berechnet. Der Container selbst bildet eine eigene Compositing-Gruppe. Das bedeutet: Ein Text mit mix-blend-mode: multiply innerhalb eines isolation: isolate-Containers mixt sich nur mit dem Hintergrund des Containers — nicht mit Elementen außerhalb. Das macht CSS Blend Modes in Komponenten zuverlässig und portierbar: Die Komponente verhält sich gleich, egal in welchem Kontext sie auf der Seite platziert wird. isolation: isolate erzeugt dabei einen neuen Stacking Context, was gleichzeitig Z-Index-Probleme innerhalb der Komponente löst.

8. Praxisbeispiele: Duotone, Textur-Overlay, Text-Effekte

Das Duotone-Verfahren mit CSS Blend Modes besteht aus zwei Schritten: Zuerst wird das Bild per filter: grayscale(100%) entsättigt, dann wird ein Farbverlauf von der Schattenfarbe zur Lichterfarbe mit mix-blend-mode: multiply überlagert. Das Ergebnis ist ein Foto, das in zwei Farbtönen erstrahlt — identisch mit dem Duotone-Effekt in Photoshop oder Figma, aber rein in CSS. Ein Vorteil: Die Farben können dynamisch über CSS Custom Properties variiert werden, sodass ein hover-State das Bild in einer anderen Farbkombination zeigt — interaktive Duotone-Effekte ohne JavaScript-Bildverarbeitung.

Für Textur-Overlays empfiehlt sich mix-blend-mode: overlay oder soft-light auf einem Pseudo-Element mit einer SVG-Rausch-Textur als Hintergrundmuster. Die SVG-Textur wird als Data-URI direkt ins CSS eingebettet — keine externe Bilddatei, keine HTTP-Anfrage. Das Pseudo-Element überlagert den gesamten Inhaltsbereich und gibt ihm eine organische, nicht-digitale Anmutung. In Kombination mit einem warmen Graddient-Hintergrund entsteht ein Retro-Poster-Look, der komplett in CSS lebt. Dieses Muster findet sich in hochwertigem Brand-Design ebenso wie in modernen Marketing-Websites — CSS Blend Modes machen es mit wenig Code realisierbar.

9. CSS Blend Modes im direkten Vergleich

Die Wahl des richtigen CSS Blend Mode hängt davon ab, welchen visuellen Effekt man erzielen möchte. Die Tabelle zeigt die wichtigsten Modi mit ihrem typischen Anwendungsfall, ihrer neutralen Farbe und dem mathematischen Kernprinzip.

Die Tabelle ist ein Referenz-Tool für den Einstieg: In der Praxis erfordert die Arbeit mit CSS Blend Modes visuelles Experimentieren, weil das Ergebnis stark vom konkreten Bild- und Farbmaterial abhängt. Die mathematischen Formeln helfen dabei, die Richtung vorherzusagen — aber die optimale Kombination aus Blend-Mode, Deckkraft und Farbe ergibt sich durch Ausprobieren im Browser. DevTools erlaubt es, CSS-Werte live zu ändern, was die Iteration erheblich beschleunigt.

10. Zusammenfassung

CSS Blend Modes bringen Photoshop-Ebenenkomposition direkt in den Browser — ohne JavaScript, ohne Bildverarbeitung, ohne externe Tools. mix-blend-mode definiert, wie ein Element mit seinem Hintergrund gemischt wird; background-blend-mode steuert die Interaktion zwischen mehreren Hintergrungebenen desselben Elements. Die wichtigsten Modi für die Praxis: multiply für Tinting und Duotone, screen für Lichteffekte, overlay für Textur-Overlays mit Kontrastverstärkung und color sowie luminosity für HSL-basierte Farbübertragungen. isolation: isolate begrenzt den Compositing-Kontext und macht CSS Blend Modes in Komponenten zuverlässig.

Der Browser-Support für CSS Blend Modes ist hervorragend — alle modernen Browser unterstützen die gesamte Palette ohne Präfix. Performance ist kein primäres Problem, solange die blend-mode-Elemente im normalen DOM-Flow liegen und nicht animiert werden. Für dynamische Farbthemen — etwa per CSS Custom Properties gesteuerte Tint-Farben — sind CSS Blend Modes ein elegantes Werkzeug, das mit minimalen CSS-Änderungen große visuelle Wirkung erzielt. Wer das Potenzial von Blend Modes kennt, greift seltener zur Bildbearbeitungssoftware und öfter zur DevTools-Konsole.

11. FAQ: CSS Blend Modes