background-blend-mode

The background-blend-mode property defines how an element’s background-image should blend with its background-color:

.container {
  background-image: url('image.jpg');
  background-color: red;
  background-blend-mode: screen;
}

In the demo above, the default background-image on the left has no blend mode set and so the image overlaps the background-color. On the right however, the blend mode has modified the background-image with the red background-color underneath. But notice that the text color has not been affected by this additional property.

Values

• initial: the default value with no blending.
• inherit: inherits the blend mode of the parent element.
• <blend-mode>: a value that will change the background-image depending on its background-color.

The value can be set as any of the following (in the demos below the background-color is red):

Chaining multiple blend modes

Each background layer can only have a single blend mode, however if we’re using multiple linear gradients for instance, each of them can have their own blend mode which makes for an interesting display:

This is achieved by listing these values in order of the background layer that you’d like to effect:

.container {
  background: 
    linear-gradient(purple 0%, red 90%), 
    linear-gradient(to right, purple 0%, yellow 90%), 
    url('image.jpg') 30px,
    url('image.jpg') 20px;
  background-blend-mode: screen, difference, lighten;
}

The first linear gradient has the screen blend mode, followed by the second linear gradient which has difference and the first background image which has lighten applied to it.

Demo

Here’s a working example of how those values are interpreted depending on the background-color:

Browser support

More information

Related properties