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.
Overview
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.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 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
Use cases
Using 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.
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