The background-blend-mode
CSS property sets how an element's background images should blend with each other and with the element's background color.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Blending modes should be defined in the same order as the background-image
property. If the blending modes' and background images' list lengths are not equal, it will be repeated and/or truncated until lengths match.
Syntax
/* One value */ background-blend-mode: normal; /* Two values, one per background */ background-blend-mode: darken, luminosity; /* Global values */ background-blend-mode: initial; background-blend-mode: inherit; background-blend-mode: unset;
Values
<blend-mode>
- The blending mode to be applied. There can be several values, separated by commas.
Formal definition
Initial value | normal |
---|---|
Applies to | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.. It also applies to ::first-letter and ::first-line . |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Formal syntax
<blend-mode>#where
<blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
Examples
Specifications
Specification | Status | Comment |
---|---|---|
Compositing and Blending Level 1 The definition of 'background-blend-mode' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
background-blend-mode | Chrome Full support 35 | Edge Full support 79 | Firefox Full support 30 | IE No support No | Opera Full support 22 | Safari Full support 8 | WebView Android Full support ≤37 | Chrome Android Full support 35 | Firefox Android Full support 30 | Opera Android Full support 22 | Safari iOS Full support 8 | Samsung Internet Android Full support 3.0 |
Legend
- Full support
- Full support
- No support
- No support