The mix-blend-mode property defines the blending of the element’s content with its direct parent background. You need to have background-image, background-color or an <img> for blending it.
In CSS, 16 blend modes are available. If a value other than “normal” (default value) is set on an element, a new stacking context will be created on that element. A newly formed group should then be blended with the stacking context, which contains the element. The element will not blend with the content which is outside of the stacking context.
Any property that causes a stacking context to be created can have an impact on blending.
You can use the isolation property for isolating an element.
| Initial Value | normal |
| Applies to | All elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS1 |
| DOM Syntax | object.style.mixBlendMode = “exclusion”; |
Syntax
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:
<!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:
<!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:
<!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:
<!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:
<!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:
<!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:
<!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 | Sets the blending mode to normal. This the default value of this property. |
| multiply | Sets the blending mode to multiply. |
| screen | Sets the blending mode to screen. |
| overlay | Sets the blending mode to overlay. |
| darken | Sets the blending mode to darken. |
| lighten | Sets the blending mode to lighten. |
| color-dodge | Sets the blending mode to color-dodge. |
| color-burn | Sets the blending mode to color-burn. |
| exclusion | Sets the blending mode to exclusion. |
| difference | Sets the blending mode to difference. |
| hue | Sets the blending mode to hue. |
| saturation | Sets the blending mode to saturation. |
| color | Sets the blending mode to color. |
| luminosity | Sets the blending mode to luminosity. |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parents element. |