The <blend-mode>
CSS data type describes how colors should appear when elements overlap. It is used in the background-blend-mode
and mix-blend-mode
properties.
Syntax
The <blend-mode>
data type is defined using a keyword value chosen from the list below.
Values
normal
-
The final color is the top color, regardless of what the bottom color is.
The effect is like two opaque pieces of paper overlapping.<div id="div"></div>
#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: normal; }
multiply
-
The final color is the result of multiplying the top and bottom colors.
A black layer leads to a black final layer, and a white layer leads to no change.
The effect is like two images printed on transparent film overlapping.<div id="div"></div>
#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: multiply; }
screen
-
The final color is the result of inverting the colors, multiplying them, and inverting that value.
A black layer leads to no change, and a white layer leads to a white final layer.
The effect is like two images shone onto a projection screen.<div id="div"></div>
#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; }
overlay
- The final color is the result of
multiply
if the bottom color is darker, orscreen
if the bottom color is lighter.
This blend mode is equivalent tohard-light
but with the layers swapped.<div id="div"></div>
#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: overlay; }
darken
-
The final color is composed of the darkest values of each color channel.
<div id="div"></div>
#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: darken; }
lighten
-
The final color is composed of the lightest values of each color channel.
<div id="div"></div>
#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: lighten; }
color-dodge
-
The final color is the result of dividing the bottom color by the inverse of the top color.
A black foreground leads to no change. A foreground with the inverse color of the backdrop leads to a fully lit color.
This blend mode is similar toscreen
, but the foreground need only be as light as the inverse of the backdrop to create a fully lit color.<div id="div"></div>
#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: color-dodge; }
color-burn
-
The final color is the result of inverting the bottom color, dividing the value by the top color, and inverting that value.
A white foreground leads to no change. A foreground with the inverse color of the backdrop leads to a black final image.
This blend mode is similar tomultiply
, but the foreground need only be as dark as the inverse of the backdrop to make the final image black.<div id="div"></div>
#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: color-burn; }
hard-light
-
The final color is the result of
multiply
if the top color is darker, orscreen
if the top color is lighter.
This blend mode is equivalent tooverlay
but with the layers swapped.
The effect is similar to shining a harsh spotlight on the backdrop.<div id="div"></div>
#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: hard-light; }
soft-light
-
The final color is similar to
hard-light
, but softer.
This blend mode behaves similar tohard-light
.
The effect is similar to shining a diffused spotlight on the backdrop.<div id="div"></div>
#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: soft-light; }
difference
-
The final color is the result of subtracting the darker of the two colors from the lighter one.
A black layer has no effect, while a white layer inverts the other layer's color.<div id="div"></div>
#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: difference; }
exclusion
-
The final color is similar to
difference
, but with less contrast.
As withdifference
, a black layer has no effect, while a white layer inverts the other layer's color.<div id="div"></div>
#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: exclusion; }
hue
-
The final color has the hue of the top color, while using the saturation and luminosity of the bottom color.
<div id="div"></div>
#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: hue; }
saturation
-
The final color has the saturation of the top color, while using the hue and luminosity of the bottom color.
A pure gray backdrop, having no saturation, will have no effect.<div id="div"></div>
#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: saturation; }
color
-
The final color has the hue and saturation of the top color, while using the luminosity of the bottom color.
The effect preserves gray levels and can be used to colorize the foreground.<div id="div"></div>
#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: color; }
luminosity
-
The final color has the luminosity of the top color, while using the hue and saturation of the bottom color.
This blend mode is equivalent tocolor
, but with the layers swapped.<div id="div"></div>
#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: luminosity; }
Description
For each pixel among the layers to which it is applied, a blend mode takes the colors of the foreground and the background, perfoms a calculation on them, and returns a new color value.
Changes between blend modes are not interpolated. Any change occurs immediately.
Examples
Blend mode comparison
In the following example, we have a <div>
with two background images set on it — a Firefox logo on top of a linear gradient. Below it we have a provided a <select>
menu that allows you to change the background-blend-mode
applied to the <div>
, allowing you to compare the different blend mode effects.
HTML
<div></div> <p>Choose a blend-mode:</p> <select> <option selected>normal</option> <option>multiply</option> <option>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>
CSS
div { width: 300px; height: 300px; background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center, linear-gradient(to bottom, blue, orange); }
JavaScript
const selectElem = document.querySelector('select'); const divElem = document.querySelector('div'); selectElem.addEventListener('change', () => { divElem.style.backgroundBlendMode = selectElem.value; });
Result
Specifications
Specification | Status | Comment |
---|---|---|
Compositing and Blending Level 1 The definition of '<blend-mode>' in that specification. |
Candidate Recommendation | Initial definition. |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
<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 59 | Chrome Android Full support 59 | Firefox Android Full support 54 | Opera Android Full support 22 | Safari iOS Full support 8 | Samsung Internet Android Full support 7.0 |
Legend
- Full support
- Full support
- No support
- No support
See also
- Properties that use this data type:
background-blend-mode
,mix-blend-mode
Description to various blend modes on other website:
- Blend modes on Wikipedia
- Blending modes in Adobe Photoshop by Adobe