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
Basic example
.item {
width: 300px;
height: 300px;
background: url('image1.png'),url('image2.png');
background-blend-mode: screen;
}
Try out different blend modes
<div id="div"></div>
<select id="select">
<option>normal</option>
<option>multiply</option>
<option selected>screen</option>
<option>overlay</option>
<option>darken</option>
<option>lighten</option>
<option>color-dodge</option>
<option>color-burn</option>
<option>hard-light</option>
<option>soft-light</option>
<option>difference</option>
<option>exclusion</option>
<option>hue</option>
<option>saturation</option>
<option>color</option>
<option>luminosity</option>
</select>
#div {
width: 300px;
height: 300px;
background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png');
background-blend-mode: screen;
}
document.getElementById("select").onchange = function(event) {
document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML;
}
console.log(document.getElementById('div'));
Specifications
Specification | Status | Comment |
---|---|---|
Compositing and Blending Level 1The definition of 'background-blend-mode' in that specification. | Candidate Recommendation | Initial definition |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
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
See also
background-blend-mode by Mozilla Contributors is licensed under CC-BY-SA 2.5.