CSS background-blend-mode

The CSS background-blend-mode property is used to blend (mix) multiple background layers of images and/or colors, in an interactive way. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #myd {width: 300px; height: 300px;
            background-image: url("images/sml-plnt.jpg"), url("images/sml-plnt-lf.jpg");
            background-repeat: no-repeat;
            background-blend-mode: lighten;}
   </style>
</head>
<body>
   
   <div id="myd"></div>
   
</body>
</html>

Output

These are the two images used in above example:

CSS background-blend-mode Syntax

The syntax of background-blend-mode property in CSS, is:

background-blend-mode: x;

The value of x should be any of the following:

normal - blend the background layer to normal. This is the default value
multiply - used to blend the layer (images) like the layer gets multiplied to provide suitable look
overlay - used to overlay the layer
darken - used to blend the layer in darken mode
luminosity - used to blend the layer in luminosity mode
screen - used to blend the layer in screen mode
color-dodge - used to blend the layer in color-dodge mode
color - used to blend the layer in color mode
saturation - used to blend the layer in saturation mode

CSS background-blend-mode Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #x, #y, #a, #b, #c, #d, #e, #f, #g, #h {width: 300px; height: 300px;
            color: white; padding: 10px;
            background-image: url("images/sml-plnt.jpg"), url("images/sml-plnt-lf.jpg");
            background-repeat: no-repeat;}
      #y {background-blend-mode: normal;}
      #a {background-blend-mode: multiply;}
      #b {background-blend-mode: overlay;}
      #c {background-blend-mode: darken;}
      #d {background-blend-mode: luminosity;}
      #e {background-blend-mode: screen;}
      #f {background-blend-mode: color-dodge;}
      #g {background-blend-mode: color;}
      #h {background-blend-mode: saturation;}
   </style>
</head>
<body>
   
   <h2>Without background-blend-mode</h2>
   <div id="x">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet, corrupti.</div>

   <h2>background-blend-mode: normal</h2>
   <div id="y">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, quaerat.</div>

   <h2>background-blend-mode: multiply</h2>
   <div id="a">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error, placeat.</div>

   <h2>background-blend-mode: overlay</h2>
   <div id="b">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, omnis.</div>

   <h2>background-blend-mode: darken</h2>
   <div id="c">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum, dolorem?</div>

   <h2>background-blend-mode: luminosity</h2>
   <div id="d">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, numquam.</div>
   
   <h2>background-blend-mode: screen</h2>
   <div id="e">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt, nihil.</div>

   <h2>background-blend-mode: color-dodge</h2>
   <div id="f">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Non, deleniti.</div>

   <h2>background-blend-mode: color</h2>
   <div id="g">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid, soluta.</div>

   <h2>background-blend-mode: saturation</h2>
   <div id="h">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat, velit?</div>
   
</body>
</html>

Output

Without background-blend-mode

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet, corrupti.

background-blend-mode: normal

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, quaerat.

background-blend-mode: multiply

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error, placeat.

background-blend-mode: overlay

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, omnis.

background-blend-mode: darken

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum, dolorem?

background-blend-mode: luminosity

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, numquam.

background-blend-mode: screen

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt, nihil.

background-blend-mode: color-dodge

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Non, deleniti.

background-blend-mode: color

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid, soluta.

background-blend-mode: saturation

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat, velit?

CSS Online Test

« Previous Tutorial Next Tutorial »