This CSS attribute specifies the blending mode for individual background layers (image/color) within an element. It determines the way in which the background image of an element combines with the background color of the element. It allows for blending multiple background images or blending them with the background color.
This feature is not compatible with Edge or Internet Explorer.
Syntax
background-blend-mode: normal | multiply | screen | color-dodge | difference | darken | lighten | saturation | luminosity | overlay | hard-light | soft-light | exclusion | hue | color-burn | color;
This characteristic offers a variety of property values. Now, let's explore the aforementioned blend modes by illustrating an example for each one.
normal
It represents the default setting that establishes the mode property as normal.
multiply
It calculates the product of the background-color and background-images, resulting in a darker image compared to the original. This technique is commonly employed to establish the blending mode as multiply.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image: url("lion.png"), url("forest.jpg");
background-blend-mode: multiply;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<img src = "https://placehold.co/300x300/1abc9c/ffffff?text=Sample+Image">
</div>
<h2> background-blend-mode: multiply; </h2>
<div id="example"></div>
</center>
</body>
</html>
screen
It is employed to establish screen blending mode and invert both the image and color. This outcome is akin to showcasing two images on a projection screen.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image: url("lion.png"), url("forest.jpg");
background-blend-mode: screen;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<img src = "https://placehold.co/300x300/1abc9c/ffffff?text=Sample+Image">
</div>
<h2> background-blend-mode: screen; </h2>
<div id="example"></div>
</center>
</body>
</html>
color-dodge
It bears resemblance to the screen blend mode and is employed to establish the blending mode as color-dodge. The outcome of this mode is derived from dividing the background color by the inverse of the background image.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image: url("lion.png"), url("forest.jpg");
background-blend-mode: color-dodge;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<img src = "https://placehold.co/300x300/1abc9c/ffffff?text=Sample+Image">
</div>
<h2> background-blend-mode: color-dodge; </h2>
<div id="example"></div>
</center>
</body>
</html>
difference
It is employed to establish the blending mode as "difference." The end outcome is derived from subtracting the darkest color from the lightest one.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image: url("lion.png"), url("forest.jpg");
background-blend-mode: difference;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<img src = "https://placehold.co/300x300/1abc9c/ffffff?text=Sample+Image">
</div>
<h2> background-blend-mode: difference; </h2>
<div id="example"></div>
</center>
</body>
</html>
darken
It is used to set the blending mode to darken.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image: url("lion.png"), url("forest.jpg");
background-blend-mode: darken;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<img src = "https://placehold.co/300x300/1abc9c/ffffff?text=Sample+Image">
</div>
<h2> background-blend-mode: darken; </h2>
<div id="example"></div>
</center>
</body>
</html>
lighten
It is used to set the blending mode to lighten.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image: url("lion.png"), url("forest.jpg");
background-blend-mode: lighten;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<img src = "https://placehold.co/300x300/1abc9c/ffffff?text=Sample+Image">
</div>
<h2> background-blend-mode: lighten; </h2>
<div id="example"></div>
</center>
</body>
</html>
Saturation
Its ultimate outcome involves saturating the upper color, leveraging the hue and luminance of the lower 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("lion.png"), url("forest.jpg");
background-blend-mode: saturation;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<img src = "https://placehold.co/300x300/1abc9c/ffffff?text=Sample+Image">
</div>
<h2> background-blend-mode: saturation; </h2>
<div id="example"></div>
</center>
</body>
</html>
luminosity
It is employed to establish the blending mode as luminosity. The end outcome is the luminosity of the upper color, incorporating the hue and saturation of the lower 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("lion.png"), url("forest.jpg");
background-blend-mode: luminosity;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<img src = "https://placehold.co/300x300/1abc9c/ffffff?text=Sample+Image">
</div>
<h2> background-blend-mode: luminosity; </h2>
<div id="example"></div>
</center>
</body>
</html>
overlay
It is used to set the blending mode to overlay.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image: url("lion.png"), url("forest.jpg");
background-blend-mode: overlay;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<img src = "https://placehold.co/300x300/1abc9c/ffffff?text=Sample+Image">
</div>
<h2> background-blend-mode: overlay; </h2>
<div id="example"></div>
</center>
</body>
</html>
hard-light
It is employed to establish the blending mode as hard-light.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image: url("lion.png"), url("forest.jpg");
background-blend-mode: hard-light;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<img src = "https://placehold.co/300x300/1abc9c/ffffff?text=Sample+Image">
</div>
<h2> background-blend-mode: hard-light; </h2>
<div id="example"></div>
</center>
</body>
</html>
soft-light
It is utilized to establish the blending mode as soft-light.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image: url("lion.png"), url("forest.jpg");
background-blend-mode: soft-light;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<img src = "https://placehold.co/300x300/1abc9c/ffffff?text=Sample+Image">
</div>
<h2> background-blend-mode: soft-light; </h2>
<div id="example"></div>
</center>
</body>
</html>
exclusion
It is used to set the blending mode to exclusion.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image: url("lion.png"), url("forest.jpg");
background-blend-mode: exclusion;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<img src = "https://placehold.co/300x300/1abc9c/ffffff?text=Sample+Image">
</div>
<h2> background-blend-mode: exclusion; </h2>
<div id="example"></div>
</center>
</body>
</html>
Its outcome is determined by merging the tint of the background image with the brightness and intensity of the background 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("lion.png"), url("forest.jpg");
background-blend-mode: hue;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<img src = "https://placehold.co/300x300/1abc9c/ffffff?text=Sample+Image">
</div>
<h2> background-blend-mode: hue; </h2>
<div id="example"></div>
</center>
</body>
</html>
color-burn
It is utilized to establish the blending mode as color-burn.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image: url("lion.png"), url("forest.jpg");
background-blend-mode: color-burn;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<img src = "https://placehold.co/300x300/1abc9c/ffffff?text=Sample+Image">
</div>
<h2> background-blend-mode: color-burn; </h2>
<div id="example"></div>
</center>
</body>
</html>
color
It is employed to adjust the blending mode to color, maintaining the luminosity of the background-color while preserving the hue and saturation of the background-image.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{
width: 400px;
height: 400px;
background-repeat: no-repeat;
background-image: url("lion.png"), url("forest.jpg");
background-blend-mode: color;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<img src = "https://placehold.co/300x300/1abc9c/ffffff?text=Sample+Image">
</div>
<h2> background-blend-mode: color; </h2>
<div id="example"></div>
</center>
</body>
</html>