mix-blend-mode
The mix-blend-mode property specifies how an element blends with its background.
Formal Syntax
<blend-mode> | plus-lighter
JavaScript Access
// Access via element.style
element.style.mixBlendMode = 'normal';
Browser Support
| Feature | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| mix-blend-mode | 41 | 32 | 8 | 79 |
| color | 41 | 32 | 10 | 79 |
| color-burn | 41 | 32 | 8 | 79 |
| color-dodge | 41 | 32 | 8 | 79 |
| darken | 41 | 32 | 8 | 79 |
| difference | 41 | 32 | 8 | 79 |
| exclusion | 41 | 32 | 8 | 79 |
| hard-light | 41 | 32 | 8 | 79 |
| hue | 41 | 32 | 10 | 79 |
| lighten | 41 | 32 | 8 | 79 |
| luminosity | 41 | 32 | 10 | 79 |
| multiply | 41 | 32 | 8 | 79 |
| normal | 41 | 32 | 8 | 79 |
| overlay | 41 | 32 | 8 | 79 |
| plus-darker | — | — | 9 | — |
| plus-lighter | 100 | 99 | 9.1 | 100 |
| saturation | 41 | 32 | 10 | 79 |
| screen | 41 | 32 | 8 | 79 |
| soft-light | 41 | 32 | 8 | 79 |
| svg_elements | 41 | 32 | — | 79 |
Related Properties
- backdrop-filter
- background-blend-mode
- box-shadow
- clip-path
- clip-rule
- color-interpolation
- color-interpolation-filters
- color-scheme
- filter
- flood-color
- flood-opacity
- forced-color-adjust
- image-orientation
- image-rendering
- isolation
- lighting-color
- mask
- mask-border
- mask-border-outset
- mask-border-repeat
- mask-border-slice
- mask-border-source
- mask-border-width
- mask-clip
- mask-composite
- mask-image
- mask-mode
- mask-origin
- mask-position
- mask-repeat
- mask-size
- mask-type
- object-fit
- object-position
- opacity
- paint-order
- print-color-adjust
- shape-image-threshold
- shape-margin
- shape-outside
- stop-color
- stop-opacity
- text-shadow
- object-view-box 🧪
- box-shadow-blur 🚧
- box-shadow-color 🚧
- box-shadow-offset 🚧
- box-shadow-position 🚧
- box-shadow-spread 🚧
- image-resolution 🚧
- mask-border-mode 🚧
- shape-inside 🚧
- shape-padding 🚧
- shape-subtract 🚧
- clip 🗑️
- color-adjust 🗑️