CSS mix-blend-mode Property
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.
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
mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity | initial | inherit;
Example
<!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>
In the following example the mix-blend-mode is set to "screen":
Example
<!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>
Here the "color-dodge" value is specified:
Example
<!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>
Another example with "hue" value:
Example
<!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>
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. |
Browser support
|
|
|
|
|
---|---|---|---|---|
41.0+ | x | 32.0+ | 8.0+ | v |