background-blend-mode

Returns a new blended color based on the background color and the background images.

Syntax

background-blend-mode: <value>;

where <value> can be one of the following: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

  • normal is the default value which imposes simple alpha blending, as CSS has permitted since its inception.

  • lighten means that the final result will show, at each pixel, either the image or its backdrop, whichever is lighter.

  • darken will show, at each pixel, whichever is darker.

Example 1

The background color will not bleed through the background image:

body {
background-image: url('fish.jpg');
background-color: blue;
background-blend-mode: normal;
}

Example 2

At each pixel, show whichever is lighter between the background image and the background color:

body {
background-image: url('fish.jpg');
background-color: blue;
background-blend-mode: lighten;
}

Example 3

At each pixel, show whichever is darker between the background image and the background color:

body {
background-image: url('fish.jpg');
background-color: blue;
background-blend-mode: darken;
}

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn CSS on Codecademy

Contributors