CSS background-blend-mode

Please Share On:

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:

background-blend-mode:color

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:

background-blend-mode:color-burn


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:

background-blend-mode:color-dodge

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:

background-blend-mode:darken

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:

Background-blend-mode: difference

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:

background-blend-mode:exclusion


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:

background-blend-mode:hard-light

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:

background-blend-mode:hue

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:

background-blend-mode:lighten


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:

background-blend-mode:luminosity

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:

background-blend-mode:multiply

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:

background-blend-mode:normal


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:

background-blend-mode:overlay

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:

background-blend-mode:saturation

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:

background-blend-mode:screen

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:

background-blend-mode:soft-light

Donate to support writers.


You may be interested in the following topics:

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright @2023. All Right Reserved.


Social media & sharing icons powered by UltimatelySocial