Definition:
CSS background-blend-mode property defines the blending mode of each background element.
Note: Internet Explorer does not support background-blend-mode.
Property Values are:
background-blend-mode:
color
color-burn
color-dodge
darken
difference
exclusion
hard-light
hue
lighten
luminosity
multiply
normal
overlay
saturation
screen
soft-light
Here is the original image. Let’s use this image as a background-blend-mode specification:

Syntax:
body
{
background-blend-mode: normal;
}
1) background-blend-mode: color;
<!DOCTYPE html>
<html>
<head>
<style>
#background_blend_mode{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/background-blend.jpg');
background-color: red;
background-blend-mode: color;
}
</style>
</head>
<body id="background_blend_mode">
<div>
<h1>Here is an example of background-blend-mode:color</h1>
</div>
</body>
</html>
Result:

2) background-blend-mode:color-burn
<!DOCTYPE html>
<html>
<head>
<style>
#background_blend_mode{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/background-blend.jpg');
background-color: red;
background-blend-mode: color-burn;
}
</style>
</head>
<body id="background_blend_mode">
<div>
<h1>Here is an example of background-blend-mode:color-burn</h1>
</div>
</body>
</html>
Result:

3) background-blend-mode:color-dodge;
<!DOCTYPE html>
<html>
<head>
<style>
#background_blend_mode{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/background-blend.jpg');
background-color: red;
background-blend-mode: color-dodge;
}
</style>
</head>
<body id="background_blend_mode">
<div>
<h1>Here is an example of background-blend-mode:color-dodge</h1>
</div>
</body>
</html>
Result:

4) background-blend-mode:darken;
<!DOCTYPE html>
<html>
<head>
<style>
#background_blend_mode{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/background-blend.jpg');
background-color: red;
background-blend-mode: darken;
}
</style>
</head>
<body id="background_blend_mode">
<div>
<h1>Here is an example of background-blend-mode:darken</h1>
</div>
</body>
</html>
Result:

5) background-blend-mode:difference;
<!DOCTYPE html>
<html>
<head>
<style>
#background_blend_mode{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/background-blend.jpg');
background-color: red;
background-blend-mode: difference;
}
</style>
</head>
<body id="background_blend_mode">
<div>
<h1>Here is an example of background-blend-mode: difference</h1>
</div>
</body>
</html>
Result:

6) background-blend-mode: exclusion;
<!DOCTYPE html>
<html>
<head>
<style>
#background_blend_mode{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/background-blend.jpg');
background-color: red;
background-blend-mode: exclusion;
}
</style>
</head>
<body id="background_blend_mode">
<div>
<h1>Here is an example of background-blend-mode:exclusion</h1>
</div>
</body>
</html>
Result:

7) background-blend-mode: hard-light;
<!DOCTYPE html>
<html>
<head>
<style>
#background_blend_mode{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/background-blend.jpg');
background-color: red;
background-blend-mode: hard-light;
}
</style>
</head>
<body id="background_blend_mode">
<div>
<h1>Here is an example of background-blend-mode:hard-light</h1>
</div>
</body>
</html>
Result:

8) background-blend-mode: hue;
<!DOCTYPE html>
<html>
<head>
<style>
#background_blend_mode{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/background-blend.jpg');
background-color: red;
background-blend-mode: hue;
}
</style>
</head>
<body id="background_blend_mode">
<div>
<h1>Here is an example of background-blend-mode: hue</h1>
</div>
</body>
</html>
Result:

9) background-blend-mode: lighten;
<!DOCTYPE html>
<html>
<head>
<style>
#background_blend_mode{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/background-blend.jpg');
background-color: red;
background-blend-mode: lighten;
}
</style>
</head>
<body id="background_blend_mode">
<div>
<h1>Here is an example of background-blend-mode: lighten</h1>
</div>
</body>
</html>
Result:

10) background-blend-mode: luminosity;
<!DOCTYPE html>
<html>
<head>
<style>
#background_blend_mode{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/background-blend.jpg');
background-color: red;
background-blend-mode: luminosity;
}
</style>
</head>
<body id="background_blend_mode">
<div>
<h1>Here is an example of background-blend-mode: luminosity</h1>
</div>
</body>
</html>
Result:

11) background-blend-mode: multiply;
<!DOCTYPE html>
<html>
<head>
<style>
#background_blend_mode{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/background-blend.jpg');
background-color: red;
background-blend-mode: multiply;
}
</style>
</head>
<body id="background_blend_mode">
<div>
<h1>Here is an example of background-blend-mode: multiply</h1>
</div>
</body>
</html>
Result:

12) background-blend-mode: normal;
<!DOCTYPE html>
<html>
<head>
<style>
#background_blend_mode{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/background-blend.jpg');
background-color: red;
background-blend-mode: normal;
}
</style>
</head>
<body id="background_blend_mode">
<div>
<h1>Here is an example of background-blend-mode: normal</h1>
</div>
</body>
</html>
Result:

13) background-blend-mode: overlay;
<!DOCTYPE html>
<html>
<head>
<style>
#background_blend_mode{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/background-blend.jpg');
background-color: red;
background-blend-mode: overlay;
}
</style>
</head>
<body id="background_blend_mode">
<div>
<h1>Here is an example of background-blend-mode: overlay</h1>
</div>
</body>
</html>
Result:

14) background-blend-mode: saturation;
<!DOCTYPE html>
<html>
<head>
<style>
#background_blend_mode{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/background-blend.jpg');
background-color: red;
background-blend-mode: saturation;
}
</style>
</head>
<body id="background_blend_mode">
<div>
<h1>Here is an example of background-blend-mode: saturation</h1>
</div>
</body>
</html>
Result:

15) background-blend-mode: screen;
<!DOCTYPE html>
<html>
<head>
<style>
#background_blend_mode{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/background-blend.jpg');
background-color: red;
background-blend-mode: screen;
}
</style>
</head>
<body id="background_blend_mode">
<div>
<h1>Here is an example of background-blend-mode: screen</h1>
</div>
</body>
</html>
Result:

16) background-blend-mode: soft-light;
<!DOCTYPE html>
<html>
<head>
<style>
#background_blend_mode{
background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/background-blend.jpg');
background-color: red;
background-blend-mode: soft-light;
}
</style>
</head>
<body id="background_blend_mode">
<div>
<h1>Here is an example of background-blend-mode: soft-light</h1>
</div>
</body>
</html>
Result:

Donate to support writers.
You may be interested in the following topics:
- CSS background-size
- CSS background-repeat-y
- CSS background-repeat-x
- CSS background-repeat
- CSS background-position-y
- CSS background-position-x
- CSS background-position
- CSS background-origin
- CSS background-image
- CSS background-color
- CSS background-clip
- CSS background-blend-mode
- CSS background-attachment
- CSS Background (All Properties)