CSS background-blend-mode Property

The background-blend-mode is a CSS property which defines the blending of the background images with each other and with the background-color. It has 10 values: normal, multiply, screen, overlay, darken, lighten, color-dodge, saturation, color, luminosity. The default value is normal.

If there are several background layers and they have a specified list of blend modes, background-blend-mode should be applied in the same order as background-image. If there aren’t enough values to match the number of layers, the list of values must be repeated until there are enough.

For blending elements, the background-blend-mode property can be used.

Initial Value normal
Applies to All elements. It also applies to ::first-letter and ::first-line.
Inherited No.
Animatable No.
Version CSS3
DOM Syntax object.style.backgroundBlendMode = "luminosity";

Syntax

background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity;

Example of the background-blend-mode property:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("/build/images/w3docs-logo-black.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: normal;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Result

In the following example try and see how the background images are blended:

Example of the background-blend-mode property with the "screen" value:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("/build/images/w3docs-logo-black.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: screen;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Example of the background-blend-mode property with the "color-dodge" value:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("/build/images/w3docs-logo-black.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: color-dodge;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Example of the background-blend-mode property with the "multiply" value:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("/build/images/w3docs-logo-black.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: multiply;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Example of the background-blend-mode property with the "overlay" value:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("/build/images/w3docs-logo-black.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: overlay;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Example of the background-blend-mode property with the "darken" value:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("/build/images/w3docs-logo-black.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: darken;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Example of the background-blend-mode property with the "saturation" value:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("/build/images/w3docs-logo-black.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: saturation;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Values

Value Description Play it
normal Sets the blending mode to normal. Play it »
multiply Sets the blending mode to multiply. Play it »
screen Sets the blending mode to screen. Play it »
overlay Sets the blending mode to overlay. Play it »
darken Sets the blending mode to darken. Play it »
lighten Sets the blending mode to lighten. Play it »
color-dodge Sets the blending mode to color-dodge. Play it »
saturnation Sets the blending mode to saturation. Play it »
color Sets the blending mode to color. Play it »
luminosity Sets the blending mode to luminosity. Play it »


Browser support

35+ 30+ 10.1+ 22+

Practice Your Knowledge

The default value of the background-blend-mode property is



Do you find this helpful?

Related articles