Introducing The CSS Background-blend-mode Property: With Easy-to-use Examples!
The background-blend mode is a CSS property that sets the blend mode for each background layer of an element. It describes how an element's backdrop picture and background color mix. The background images can be mixed or blended with the background color, although Edge/Internet Explorer does not allow this.
It has multiple property values. These values are discussed below with an example of each.
Normal
This value is the default value of the property. It sets the property mode to its normal state.
You might be interested in CSS Background-Clip and CSS Checkbox Style
CSS Background-blend-mode: Multiply
It is utilized to multiply the blending mode. The picture then becomes darker than it was previously due to the multiplied backdrop color and image. Observe the example below.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image: url("rose.png"), url("garden.jpg");
background-blend-mode: multiply;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "rose.png">
<img src = "garden.jpg">
</div>
<h2> background-blend-mode example: multiply; </h2>
<div id="example"></div>
</center>
</body>
</html>
CSS Background blend mode: Screen
It inverts both the image and the color and is used to change the blending mode on the screen. The projection screen would appear to show two images resulting from this effect. Observe the example below.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image: url("rose.png"), url("garden.jpg");
Background-blend-mode: screen;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "rose.png">
<img src = "garden.jpg">
</div>
<h2> background-blend-mode example: screen; </h2>
<div id="example"></div>
</center>
</body>
</html>
CSS Background blend mode: Color-dodge
It resembles screen blend mode in many ways. It is used to switch to color-dodge blending mode. The outcome is obtained by dividing the background color by the background image's inverse. Observe the example below.
Talk of backgrounds, you might want to learn about CSS Background Attachments
Example
<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image: url("rose.png"), url("garden.jpg");
background-blend-mode: color-dodge;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "rose.png">
<img src = "garden.jpg">
</div>
<h2> background-blend-mode example: color-dodge; </h2>
<div id="example"></div>
</center>
</body>
</html>
CSS Background blend mode: Difference
The blending mode is changed to the value called difference using this. The outcome is determined by deducting the darkest color from the lightest color. Observe the example below. Set your background properly here
Example
<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image: url("rose.png"), url("garden.jpg");
background-blend-mode: difference;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "rose.png">
<img src = "garden.jpg">
</div>
<h2> background-blend-mode example: difference; </h 2>
<div id="example"></div>
</center>
</body>
</html>
CSS Background blend mode: Darken
Darkening the blending mode is done by using this option. Observe the example below.
<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image: url("rose.png"), url("garden.jpg");
background-blend-mode: darken;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "rose.png">
<img src = "garden.jpg">
</div>
<h2> background-blend-mode example: darken; </h2>
<div id="example"></div>
</center>
</body>
</html>
Example
CSS Background blend mode: Lighten
To lighten the blend mode, use this option. Observe the following example.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image: url("rose.png"), url("garden.jpg");
background-blend-mode: lighten;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "rose.png">
<img src = "garden.jpg">
</div>
<h2> background-blend-mode example: lighten; </h2>
<div id="example"></div>
</center>
</body>
</html>
CSS Background blend mode: Saturation
This value’s final product uses the bottom color's hue and luminosity while utilizing the top color's saturation.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image: url("rose.png"), url("garden.jpg");
background-blend-mode: saturation;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "rose.png">
<img src = "garden.jpg">
</div>
<h2> background-blend-mode example: saturation; </h2>
<div id="example"></div>
</center>
</body>
</html>
CSS Background blend mode: Luminosity
The blending mode is changed to luminosity using this. Its final product uses the hue and saturation of the bottom color while utilizing the luminosity of the top color.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image: url("rose.png"), url("garden.jpg");
background-blend-mode: luminosity;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "rose.png">
<img src = "garden.jpg">
</div>
<h2> background-blend-mode example: luminosity; </h2>
<div id="example"></div>
</center>
</body>
</html>
CSS Background blend mode: Overlay
This value sets the blending mode to overlay. Observe the following example to understand.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image: url("rose.png"), url("garden.jpg");
background-blend-mode: overlay;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "rose.png">
<img src = "garden.jpg">
</div>
<h2> background-blend-mode example: overlay; </h2>
<div id="example"></div>
</center>
</body>
</html>
CSS Background blend mode: Hard-light
This value sets the blending mode to hard-light. Observe the following example to understand.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image: url("rose.png"), url("garden.jpg");
background-blend-mode: hard-light;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "rose.png">
<img src = "garden.jpg">
</div>
<h2> background-blend-mode example: hard-light; </h2>
<div id="example"></div>
</center>
</body>
</html>
CSS Background blend mode: Soft-light
This value sets the blending mode to soft-light. Observe the example below to understand.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image: url("rose.png"), url("garden.jpg");
background-blend-mode: soft-light;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "rose.png">
<img src = "garden.jpg">
</div>
<h2> background-blend-mode example: soft-light; </h2>
<div id="example"></div>
</center>
</body>
</html>
CSS Background blend mode: Exclusion
This value sets the blending mode to exclusion. Observe the example below to understand.
<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image: url("rose.png"), url("garden.jpg");
background-blend-mode: exclusion;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "rose.png">
<img src = "garden.jpg">
</div>
<h2> background-blend-mode example: exclusion; </h2>
<div id="example"></div>
</center>
</body>
</html>
Example
CSS Background blend mode: Hue
Combining the background image's hue with the brightness and saturation of the background color produces the desired effect.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image: url("rose.png"), url("garden.jpg");
background-blend-mode: hue;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "rose.png">
<img src = "garden.jpg">
</div>
<h2> background-blend-mode example: hue; </h2>
<div id="example"></div>
</center>
</body>
</html>
CSS Background blend mode: Color-burn
This value sets the blending mode to color-burn. Observe the following example.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image: url("rose.png"), url("garden.jpg");
background-blend-mode: color-burn;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "rose.png">
<img src = "garden.jpg">
</div>
<h2> background-blend-mode example: color-burn; </h2>
<div id="example"></div>
</center>
</body>
</html>
CSS Background blend mode: Color
By using this value, the blending mode can be changed to color. It maintains the background color's luminosity and the background image's hue and saturation.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image: url("rose.png"), url("garden.jpg");
background-blend-mode: color;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "rose.png">
<img src = "garden.jpg">
</div>
<h2> background-blend mode example: color; </h2>
<div id="example"></div>
</center>
</body>
</html>
For more tutorial articles on CSS, visit our CSS tutorial Page.
