mix-blend-mode

The mix-blend-mode CSS property blends an element's content with its background or parent elements using blend modes like multiply, difference, or color.

Baseline Status: Achieved Widely Available on Jul 15, 2022 (Cross-browser Newly Available since Jan 15, 2020).

Desktop Browser Engine Support

Google Chrome

41

Supported

Mozilla Firefox

32

Supported

Apple Safari

8

Supported

Microsoft Edge

79

Supported

Mobile Browser Engine Support

Chrome Android

41

Firefox Android

32

Safari iOS

8

Specifications and References

Specification ↗ Can I Use (css-mixblendmode) ↗ Feature XML ↗

MDN Browser Compat Data Keys:

css.properties.mix-blend-mode ↗ css.properties.mix-blend-mode.plus-darker ↗ css.properties.mix-blend-mode.plus-lighter ↗ css.properties.mix-blend-mode.svg_elements ↗