X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

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("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.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>

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("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.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("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.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("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.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>

Values

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

Browser support

35+ x 30+ 10.1+ 22+

Practice Your Knowledge

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



Do you find this helpful?

Related articles