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

background-blend-mode

The background-blend-mode CSS property blends an element's background image and background color using blend modes like multiply, difference, or color.

Effects

Overview

The background-blend-mode CSS property blends an element's background image and background color using blend modes like multiply, difference, or color.

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 blends an element's background image and background color using blend modes like multiply, difference, or color.

Cautions

  • May not be supported in older browsers.

Accessibility

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

Related links

Powered by web-features