Widely available Supported across all major browsers. Safe to use in production.

background-blend-mode

The background-blend-mode CSS property sets how an element's background images should blend with each other and with the element's background color.

Blending modes should be defined in the same order as the background-image property. If the blending modes' and background images' list lengths are not equal, it will be repeated and/or truncated until lengths match.

Effects

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
background-blend-mode
35
79
30
8
35
8
Other
css.types.blend-mode

The CSS data type describes how colors should appear when elements overlap. It is used in the background-blend-mode and mix-blend-mode properties.
35
79
30
8
59
8
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.tinted-image {
  background-image: url('photo.jpg');
  background-color: #3498db;
  background-blend-mode: multiply;
}

Live demo

multiply

CSS Multiply demo.

PreviewFullscreen

screen

CSS Screen demo.

PreviewFullscreen

overlay

CSS Overlay demo.

PreviewFullscreen

Use cases

  • Using background-blend-mode

    The background-blend-mode CSS property sets how an element's background images should blend with each other and with the element's background color.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links