CSS background-blend-mode property

The background-blend-mode property blends background layers together.

This property may include multiple images to be blended.

Background images can also blend with a background color.

Example

#

Two background images blended with background-blend-mode set to multiply.

<style>
  .bg-multiply {
    max-width: 400px;
    height: 300px;
    background-repeat: no-repeat;
    background-image: url("/img/css/vangogh.jpg"), 
                      url("/img/css/the-sower.jpg");
    background-blend-mode: multiply;
  }
</style>

<div class="bg-multiply"></div>

Syntax

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

Values

#

Value Description
normal Default. Normal blending mode.
multiply Multiply blending mode.
screen Screen blending mode.
overlay Overlay blending mode.
darken Darken blending mode.
lighten Lighten blending mode.
color-dodge Color dodge blending mode.
saturation Saturation blending mode.
color Color blending mode.
luminosity Luminosity blending mode.

More Examples

Click the buttons to see the different background-blend-mode values.

<style>
  .bg-blend-example { 
    max-width: 400px;
    height: 300px;
    background-repeat: no-repeat;
    background-image: url("/img/css/vangogh.jpg"), 
                      url("/img/css/the-sower.jpg");
    background-blend-mode: darken;
  }
</style>

<div class="bg-blend-example"></div>

Browser support

This table shows when background-blend-mode support started for each browser.

Chrome
35.0 May 2014
Firefox
30.0 Jun 2014
IE/Edge
Not supported
Opera
22.0 Jun 2013
Safari
7.1 Sep 2014

You may also like

Guides