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

mix-blend-mode

The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

Effects

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
mix-blend-mode
41
79
32
8
41
8
plus-darker
Experimental
9
9
plus-lighter
100
100
99
9.1
100
9.3
svg elements

On SVG elements
41
79
32
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.overlay-text {
  mix-blend-mode: multiply;
  color: #ff6b6b;
}

.image-blend {
  mix-blend-mode: screen;
}

.duotone {
  position: relative;
}

.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #4f46e5;
  mix-blend-mode: color;
}

Live demo

multiply

mix-blend-mode Multiply demo.

PreviewFullscreen

screen

mix-blend-mode Screen demo.

PreviewFullscreen

difference

mix-blend-mode Difference demo.

PreviewFullscreen

Use cases

  • Using mix-blend-mode

    The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

Cautions

  • May not be supported in older browsers.

Accessibility

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

Related links