mix-blend-modeBaseline · Widely available
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.
Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Jan 15, 2020. Widely available since Jul 15, 2022.
Browser support
DesktopChrome
1–40Not supported
41+Supportedsince Mar 3, 2015
Current: 155Edge
12–18Not supported
79+Supportedsince Jan 15, 2020
Current: 154Firefox
1–31Not supported
32+Supportedsince Sep 2, 2014
Current: 157Safari
1–7Not supported
8+Supportedsince Oct 16, 2014
Current: 27MobileChrome Android
18–40Not supported
41+Supportedsince Mar 11, 2015
Current: 155Firefox Android
4–31Not supported
32+Supportedsince Sep 2, 2014
Current: 157Safari iOS
1–7Not supported
8+Supportedsince Sep 17, 2014
Current: 27How to use
This feature is Baseline widely available — use it freely, no fallback needed.
Example
Full syntax and examples are on MDN: mix-blend-mode.
Feature detection
CSS · check before using
@supports (mix-blend-mode: initial) {
/* styles that rely on mix-blend-mode */
}
/* or in JavaScript */
if (CSS.supports("mix-blend-mode", "initial")) {
// use it
}Documentation (MDN)
Specification
Usage share
Sub-features
Support for each part of the feature (4). The overall table above shows when the whole feature works.
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| mix-blend-mode | 41 | 79 | 32 | 8 | 41 | 32 | 8 |
| mix-blend-mode.plus-darker | ✕ | ✕ | ✕ | 9 | ✕ | ✕ | 9 |
| mix-blend-mode.plus-lighter | 100 | 100 | 99 | 9.1 | 100 | 99 | 9.3 |
| mix-blend-mode.svg_elements | 41 | 79 | 32 | ✕ | ✕ | 32 | ✕ |