CSS Data Type - <blend-mode>

CSS <blend-mode> data type specifies the color scheme that should be used when elements overlap. This data type is used by both the background-blend-mode and mix-blend-mode properties.

Possible Values

normal − Default value. The top color completely covers the bottom color.
multiply − The top and bottom colour values are multiplied to obtain the final color.
screen − The final color is obtained by inverting, multiplying, and then inverting that value again.
overlay − The final color is determined by multiplying if the bottom color is darker or screening if it is lighter. Similiar to "hard-light", but with swapped layers.
darken − The final color is the darkest values of each color channel.
lighten − The final color is the lightest values of each color channel.
color-dodge − Divide the bottom color by the inverse of the top color to get the final color.
color-burn − Inverting the bottom color, dividing it by the top color, and then inverting that value to get the final color.
hard-light − The final colour is determined by multiplying if the top color is darker or same as of "screen", if it is lighter. Similar to "overlay", but with swapped layers.
soft-light − The final color is softer than hard-light. Similart to hard-light.
difference − The final color is the difference between the lighter and darker shades. Black doesn't affect the result, but white swaps the colors.
exclusion − Similar to the "difference", with less contrast. A black layer has no effect, while white reverses the other color.
hue − The final color uses the hue of the top color as well as the bottom color's saturation and luminosity.
saturation − The final color combines the top color's saturation with the bottom color's hue and luminosity.
color − The final color combines the top color's hue and saturation with the bottom color's luminosity.
luminosity − It is similar to the value of "color", but with swapped layers.

Syntax

mix-blend-mode: normal; 
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

CSS - background-blend-mode: normal

The following example demonstrates that background-blend-mode: normal property makes the top color the final color. The red box completely covers the blue box −

Here is an example −

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: blue;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: red; 
      position: absolute;
      top: 60px;
      left: 60px;
      background-blend-mode: normal; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>

CSS - background-blend-mode: multiply

When you set mix-blend-mode: multiply, the red box and the blue box mix together, creating a black shade where the two boxes overlap −

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: blue;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: red; 
      position: absolute;
      top: 60px;
      left: 60px;
      mix-blend-mode: multiply; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>

CSS - mix-blend-mode: screen

The following example demonstrates that the red box with mix-blend-mode: screen, gets overlapped with the blue box, creating a new color that's a mix of both the colors red and blue −

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: blue;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: red; 
      position: absolute;
      top: 60px;
      left: 60px;
      mix-blend-mode: screen; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>

CSS - mix-blend-mode: overlay

The following example demonstrates the use of mix-blend-mode: overlay property, that makes the blue box completely hiding the red box −

<html>
<head>
<style>
  .box {
    width: 300px;
    height: 200px;
    position: relative;
  }
  .background-box {
    width: 150px;
    height: 150px;
    background-color: blue;
  }
  .front-box {
    width: 150px;
    height: 150px;
    background-color: red; 
    position: absolute;
    top: 60px;
    left: 60px;
    mix-blend-mode: overlay; 
  }
</style>
</head>
<body>
  <div class="box">
    <div class="background-box"></div>
    <div class="front-box"></div>
  </div>
</body>
</html>

CSS - mix-blend-mode: darken

The following example demonstrates that mix-blend-mode: darken property combines the red and blue boxes, making a darker shade of color where they overlap −

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: blue;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: red; 
      position: absolute;
      top: 60px;
      left: 60px;
      mix-blend-mode: darken; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>

CSS - mix-blend-mode: lighten

The following example demonstrates that mix-blend-mode: lighten property combines the red and blue boxes, creating a light shade of color where they overlap −

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: blue;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: red; 
      position: absolute;
      top: 60px;
      left: 60px;
      mix-blend-mode: lighten; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>

CSS - mix-blend-mode: color-dodge

The following example demonstrates that the mix-blend-mode: color-dodge property results in the overlapping region of the red box and the blue box to appear brighter. −

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: blue;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: red; 
      position: absolute;
      top: 60px;
      left: 60px;
      mix-blend-mode: color-dodge; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>

CSS - mix-blend-mode: color-burn

The following example demonstrates that the mix-blend-mode: color-burn property results in a darkened effect. The place where the boxes overlap it becomes darker than each of the original colors −

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: orange;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: blue; 
      position: absolute;
      top: 60px;
      left: 60px;
      mix-blend-mode: color-burn; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>

CSS - mix-blend-mode: hard-light

The following example demonstrates that the mix-blend-mode: hard-light property, which is applied on the blue color box, completely hiding the red box −

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: red;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: blue; 
      position: absolute;
      top: 60px;
      left: 60px;
      mix-blend-mode: hard-light; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>

CSS - mix-blend-mode: soft-light

The following example demonstrates that the mix-blend-mode: soft-light property, which is applied on blue color box, resulting in red box completely hiding the blue box −

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: red;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: blue; 
      position: absolute;
      top: 60px;
      left: 60px;
      mix-blend-mode: soft-light; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>

CSS - mix-blend-mode: difference

The following example demonstrates that the mix-blend-mode: difference property results in subtraction of the darker color from the lighter color and creation of a unique color −

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: red;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: blue; 
      position: absolute;
      top: 60px;
      left: 60px;
      mix-blend-mode: difference; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>

CSS - mix-blend-mode: exclusion

The following example demonstrates that the mix-blend-mode: exclusion property applied to blue box. When the blue and red boxes overlap they create a unique color −

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: red;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: blue; 
      position: absolute;
      top: 60px;
      left: 60px;
      mix-blend-mode: exclusion; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>

CSS - mix-blend-mode: hue

The following example demonstrates that the mix-blend-mode: hue property applied to blue box. When the blue and orange boxes overlap then it produces the color based on their hue values −

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: orange;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: blue; 
      position: absolute;
      top: 60px;
      left: 60px;
      mix-blend-mode: hue; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>

CSS - mix-blend-mode: saturation

The following example demonstrates that the red box with mix-blend-mode: saturation creates a new color saturation based on the top layer −

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: orange;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: blue; 
      position: absolute;
      top: 60px;
      left: 60px;
      mix-blend-mode: saturation; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>

CSS - mix-blend-mode: color

The following example demonstrates that the red box with mix-blend-mode: color creates a new color based on the hue and saturation on the top layer −

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: orange;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: blue; 
      position: absolute;
      top: 60px;
      left: 60px;
      mix-blend-mode: color; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>

CSS - mix-blend-mode: luminosity

The following example demonstrates that the mix-blend-mode: luminosity property applied to blue box. When the blue and orange boxes overlap, they produces a dark color −

<html>
<head>
<style>
   .box {
      width: 300px;
      height: 200px;
      position: relative;
   }
   .background-box {
      width: 150px;
      height: 150px;
      background-color: orange;
   }
   .front-box {
      width: 150px;
      height: 150px;
      background-color: blue; 
      position: absolute;
      top: 60px;
      left: 60px;
      mix-blend-mode: luminosity; 
   }
</style>
</head>
<body>
   <div class="box">
      <div class="background-box"></div>
      <div class="front-box"></div>
   </div>
</body>
</html>