CSS background-blend-mode Property
The background-blend-mode is a CSS property that 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/web-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>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/web-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/web-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/web-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/web-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/web-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. | |
| 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. | |
| saturation | Sets the blending mode to saturation. | |
| color | Sets the blending mode to color. | |
| luminosity | Sets the blending mode to luminosity. |
0 Comments
CAN FEEDBACK
Emoji