The background-blend-mode is a CSS property which defines the blending of the background images with each other and with the background-color. It has 10 values: normal, multiply, screen, overlay, darken, lighten, color-dodge, saturation, color, luminosity. The default value is normal.
If there are several background layers and they have a specified list of blend modes, background-blend-mode should be applied in the same order as background-image. If there aren’t enough values to match the number of layers, the list of values must be repeated until there are enough.
For blending elements, the background-blend-mode property can be used.
Initial Value | normal |
Applies to | All elements. It also applies to ::first-letter and ::first-line. |
Inherited | No. |
Animatable | No. |
Version | CSS3 |
DOM Syntax | object.style.backgroundBlendMode = "luminosity"; |
Syntax
background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity;
Example of the background-blend-mode property:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("/build/images/w3docs-logo-black.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: normal;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Result
In the following example try and see how the background images are blended:
Example of the background-blend-mode property with the "screen" value:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("/build/images/w3docs-logo-black.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: screen;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Example of the background-blend-mode property with the "color-dodge" value:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("/build/images/w3docs-logo-black.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: color-dodge;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Example of the background-blend-mode property with the "multiply" value:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("/build/images/w3docs-logo-black.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: multiply;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Example of the background-blend-mode property with the "overlay" value:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("/build/images/w3docs-logo-black.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: overlay;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Example of the background-blend-mode property with the "darken" value:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("/build/images/w3docs-logo-black.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: darken;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Example of the background-blend-mode property with the "saturation" value:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 400px;
background-repeat: no-repeat, repeat;
background-image: url("/build/images/w3docs-logo-black.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
background-blend-mode: saturation;
background-size: 280px;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Values
Value | Description | Play it |
---|---|---|
normal | Sets the blending mode to normal. | Play it » |
multiply | Sets the blending mode to multiply. | Play it » |
screen | Sets the blending mode to screen. | Play it » |
overlay | Sets the blending mode to overlay. | Play it » |
darken | Sets the blending mode to darken. | Play it » |
lighten | Sets the blending mode to lighten. | Play it » |
color-dodge | Sets the blending mode to color-dodge. | Play it » |
saturnation | Sets the blending mode to saturation. | Play it » |
color | Sets the blending mode to color. | Play it » |
luminosity | Sets the blending mode to luminosity. | Play it » |
Browser support
35+ | 30+ | 10.1+ | 22+ |
Practice Your Knowledge
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.