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.

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

<!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 this example we use the "screen" value. Try and see how it blends background images.

Example

<!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>

In the following example "color-dodge" value is set.

Example

<!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>

See another example with "multiply" value.

Example

<!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.

Related Resources

Background-color, background-image, background-position, background-origin, background-clip, background-size, background-attachment.


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