CSS background-blend-mode Property

❮ Prev Next ❯

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";

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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 »