CSS background-blend-mode

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

Syntax

background-blend-mode: <value>;

Copy to clipboard
Copy to clipboard

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

Copy to clipboard
Copy to clipboard

The following image demonstrates the code block above:

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

Copy to clipboard
Copy to clipboard

The following image demonstrates the code block above:

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

Copy to clipboard
Copy to clipboard

The following image demonstrates the code block above: