1. css
  2. /properties
  3. /background-blend-mode

background-blend-mode

Definition

The background-blend-mode property in CSS is used to specify how a background image should blend with the background color of an element.

Examples

Blending a background image and background color together using the multiply blend mode:

.multiply-blend {
  background-color: #ff0000;
  background-image: url('image.jpg');
  background-blend-mode: multiply;
}

Blending a background image and background color together using the screen blend mode:

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

Blending a background image and background color together using the overlay blend mode:

.overlay-blend {
  background-color: #ff0000;
  background-image: url('image.jpg');
  background-blend-mode: overlay;
}

Values

ValueDescription
normalThe default value. The background image is displayed as it is, without any blending with the background color.
multiplyThe colors in the background image are multiplied with the colors in the background color, resulting in a darker image. This blend mode is often used to create a layered, shadowed effect.
screenThe colors in the background image are inverted, multiplied, and then inverted again, resulting in a brighter image. This blend mode is often used to create a lightening or highlighting effect.
overlayThe colors in the background image are blended with the colors in the background color using the multiply and screen blend modes, depending on the luminosity of each color.
darkenThe darker of the two colors is used for each pixel.
lightenThe lighter of the two colors is used for each pixel.
color-dodgeThe background color is brightened to reflect the background image.
color-burnThe background color is darkened to match the hue of the background image.
hard-lightThe background image is blended with the background color using the multiply and screen blend modes, depending on the luminosity of the background color.
soft-lightThe background image is blended with the background color using a softer version of the hard-light blend mode.
differenceThe absolute difference between the two colors is used for each pixel.
exclusionThe result of the difference blend mode is inverted.
hueThe hue of the background image is used, while the saturation and luminosity of the background color are preserved.
saturationThe saturation of the background image is used, while the hue and luminosity of the background color are preserved.
colorThe hue and saturation of the background image are used, while the luminosity of the background color is preserved.
luminosityThe luminosity of the background image is used, while the hue and saturation of the background color are preserved.

Best Practices

  • Make sure to set a background color as well as a background image, as the background-blend-mode property only works when both are present.
  • Use the background-blend-mode property sparingly, as it can be hard to predict how the background image and background color will be blended together.
  • Test the background-blend-mode property in different browsers to make sure it looks the way you want it to. Different browsers may implement the blend modes differently, so it's a good idea to test in as many browsers as possible.
  • Consider using a preprocessor, such as Sass or Less, to make it easier to manage the background-blend-mode property in your stylesheets.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes