W3cubDocs

blend-mode

The <blend-mode> type is a collection of keywords describing blend modes.

A blend mode is a method of calculating the final color value of a pixel when layers overlap. Each blend mode takes the color value of the foreground and the backdrop (top color and bottom color respectively), perfoms its calculation and returns a color value. The final, visible layer is the result of performing the blend mode calculation on every overlapping pixel among the blended layers.

Syntax

Syntax not found in DB!

Possible values

normal

The final color is the top color, whatever the bottom color may be.
The effect is similar to 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 similar to 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 color value.
A black layer leads to no change, and a white layer leads to a white final layer.
The effect is similar to 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, or screen if the bottom color is lighter.
This blend mode is equivalent to hard-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 a color composed of the darkest values per 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 a color composed of the lightest values per 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 to screen, but the foreground need only be as light as the inverse of the backdrop to reach 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

This 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 to multiply, 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, or screen if the top color is lighter.
This blend mode is equivalent to overlay 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 to hard-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 with difference, 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 to color, 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;
}

Interpolation of Blend modes

Changes between blends mode are not interpolated. Any change occurs abruptly.

Specifications

Specification	Status	Comment
Compositing and Blending Level 1 The definition of '<blend-mode>' in that specification.	Candidate Recommendation	Initial definition.

Browser Compatibility

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	35	(Yes)	?	?	?