CSS mix-blend-mode Property
The mix-blend-mode CSS property sets the blending of background-images or background-colors. Read about the values and try examples.
The CSS mix-blend-mode property controls how an element's content blends with the content behind it — typically its parent's background-color, background-image, or another overlapping element. Instead of one layer simply covering the other, the browser combines their pixels with a mathematical formula (multiply, screen, difference, and so on), the same way blend modes work in Photoshop.
This page covers what each blend mode does, when stacking context matters, and runnable examples for the most useful values.
How blending works
For blending to be visible you need two layers to overlap — for example an <img> on top of a colored <div>. The blend mode then mixes the foreground pixels with the backdrop pixels:
multiplydarkens — white in the foreground disappears, dark areas stay. Good for shadows and tinting.screenlightens — black disappears, light areas stay. The inverse ofmultiply.overlaycombines both: it darkens dark areas and lightens light ones, boosting contrast.difference/exclusionsubtract colors, producing inverted, high-contrast effects.hue,saturation,color,luminositymix one channel of the foreground (its hue, saturation, etc.) with the rest of the backdrop — useful for recoloring images.
There are 16 blend modes in total (listed in the Values table below).
Stacking context and isolation
Setting any value other than normal creates a new stacking context on the element. The element blends only with content inside that stacking context — it will not blend with anything outside it. This is what stops a blended element from bleeding into the whole page.
Because of this, any property that establishes a stacking context (such as opacity below 1, transform, or position with a z-index) can change the blending result. To deliberately stop an element from blending with what is behind it, give an ancestor the isolation: isolate property — this creates a fresh stacking context so the blend is contained.
If you want to blend an element’s background images together, you can use the background-blend-mode property.
| Initial Value | normal |
|---|---|
| Applies to | All elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS1 |
| DOM Syntax | object.style.mixBlendMode = "exclusion"; |
Syntax
Syntax of CSS mix-blend-mode Property
mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity | initial | inherit;Example of the mix-blend-mode property:
Example of CSS mix-blend-mode Property with multiply value
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.example {
background-color: #8ebf42;
height: 800px;
}
img {
width: 100%;
height: auto;
float: left;
mix-blend-mode: multiply;
}
</style>
</head>
<body>
<h2>Mix-blend-mode property example</h2>
<h3>Mix-blend-mode: multiply</h3>
<div class="example">
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
</div>
</body>
</html>Example of the mix-blend-mode property with the "screen" value:
Example of CSS mix-blend-mode Property with screen value
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.example {
background-color: #8ebf42;
height: 800px;
}
img {
width: 100%;
height: auto;
float: left;
mix-blend-mode: screen;
}
</style>
</head>
<body>
<h2>Mix-blend-mode property example</h2>
<h3>Mix-blend-mode: screen</h3>
<div class="example">
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
</div>
</body>
</html>Example of the mix-blend-mode property with the "color-dodge" value:
Example of CSS mix-blend-mode Property with color-dodge value
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.example {
background-color: #8ebf42;
height: 800px;
}
img {
width: 100%;
height: auto;
float: left;
mix-blend-mode: color-dodge;
}
</style>
</head>
<body>
<h2>Mix-blend-mode property example</h2>
<h3>Mix-blend-mode: color-dodge</h3>
<div class="example">
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
</div>
</body>
</html>Example of the mix-blend-mode property with the "hue" value:
Example of CSS mix-blend-mode Property with hue value
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.example {
background-color: #8ebf42;
height: 800px;
}
img {
width: 100%;
height: auto;
float: left;
mix-blend-mode: hue;
}
</style>
</head>
<body>
<h2>Mix-blend-mode property example</h2>
<h3>Mix-blend-mode: hue</h3>
<div class="example">
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
</div>
</body>
</html>Example of the mix-blend-mode property with the "normal" value:
CSS mix-blend-mode Property
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
background-color: #ff0000;
height: 500px;
}
img {
width: 50%;
height: auto;
float: left;
mix-blend-mode: normal;
}
</style>
</head>
<body>
<h2>Mix-blend-mode property example</h2>
<h3>Mix-blend-mode: normal</h3>
<div class="example">
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
</div>
</body>
</html>Example of the mix-blend-mode with the "hard-light" value:
CSS mix-blend-mode Property
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
background-color: #ff0000;
height: 400px;
}
img {
width: 50%;
height: auto;
float: left;
mix-blend-mode: hard-light;
}
</style>
</head>
<body>
<h2>Mix-blend-mode property example</h2>
<h3>Mix-blend-mode: hard-light</h3>
<div class="example">
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
</div>
</body>
</html>Example of the mix-blend-mode with the "difference" value:
CSS mix-blend-mode Property
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
background-color: #ff0000;
height: 400px;
}
img {
width: 50%;
height: auto;
float: left;
mix-blend-mode: difference;
}
</style>
</head>
<body>
<h2>Mix-blend-mode property example</h2>
<h3>Mix-blend-mode: difference</h3>
<div class="example">
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
</div>
</body>
</html>Values
| Value | Description |
|---|---|
| normal | No blending — the element is painted normally on top of the backdrop. This is the default. |
| multiply | Multiplies the colors; the result is always darker. White has no effect, black stays black. |
| screen | Inverts, multiplies, and inverts again; the result is always lighter. The opposite of multiply. |
| overlay | multiply on dark areas and screen on light ones — increases contrast. |
| darken | Keeps the darker of the two colors for each channel. |
| lighten | Keeps the lighter of the two colors for each channel. |
| color-dodge | Brightens the backdrop to reflect the foreground color. |
| color-burn | Darkens the backdrop to reflect the foreground color. |
| hard-light | Like overlay but with the layers swapped — a harsh spotlight effect. |
| soft-light | A softer version of hard-light, like a diffused spotlight. |
| difference | Subtracts the darker color from the lighter one; equal colors produce black. |
| exclusion | Similar to difference but lower in contrast. |
| hue | Foreground hue with the backdrop's saturation and luminosity. |
| saturation | Foreground saturation with the backdrop's hue and luminosity. |
| color | Foreground hue and saturation with the backdrop's luminosity — recolors while keeping detail. |
| luminosity | Foreground luminosity with the backdrop's hue and saturation. |
| initial | Sets the property to its default value (normal). |
| inherit | Inherits the value from the parent element. |
Related properties
background-blend-mode— blends an element's own background layers (images and color) together, rather than with what is behind the element.isolation— creates a stacking context so a blend stays contained.opacityandfilter— other ways to alter how an element is composited.