background-blend-mode

Anonymous contributor's avatar
Anonymous contributor
Published Jun 30, 2021Updated Oct 23, 2023
Contribute to Docs

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

The following image demonstrates the code block above:

background-blend-mode example 1

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

The following image demonstrates the code block above:

background-blend-mode example 2

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

The following image demonstrates the code block above:

background-blend-mode example 3

All contributors

Contribute to Docs

Learn CSS on Codecademy