CSS <blend-mode> Data Type

The <blend-mode> data type describes how an element is blended with its backdrop.

Blending is the aspect of compositing that calculates the mixing of colors where the source element and backdrop overlap. The <blend-mode> data type can be used with blending properties such as mix-blend-mode and background-blend-mode to define how the source element blends with its backdrop where the two overlap.

Examples

The background-blend-mode Property

Here's an example of using <blend-mode> with the background-blend-mode property.

Here's a working example:

The mix-blend-mode Property

Here we use the mix-blend-mode property to specify how an image blends with the background color of the body element.

Possible Values

When you see <blend-mode> (including the < and >) anywhere in the CSS specifications, this refers to the fact that the value can be one of the following:

normal
This is the default attribute which specifies no blending. The source element will be its specified color, regardless of the color of its backdrop. This is akin to having two opaque pieces of paper overlapping.
multiply
Multiplies the numbers for each pixel of the top layer with the corresponding pixel for the bottom layer. This results in a darker color. Similar to two images on transparent film overlapping.
screen
The values of the pixels in the two layers are inverted, multiplied, and then inverted again. This has the opposite effect to multiply. The result is a brighter color.
overlay
Combines multiply and screen modes. The parts of the top layer where the base layer is light become lighter, the parts where the base layer is dark become darker.
darken
Keeps the darker tones of each layer. All pixels of the layer that are darker than the ones on the layer/s below are kept in the image. If the pixels are lighter, they are replaced with the ones from the layer/s below. This rule is applied to each of the three RGB (Red, Green, Blue) channels separately.
lighten
Same behavior as darken but with the lighter tones kept instead.
color-dodge
Divides the bottom layer by the inverted top layer. This lightens the bottom layer depending on how bright the top layer is (i.e. the brighter the top layer, the more its color affects the bottom layer).
color-burn
Divides the inverted bottom layer by the top layer, and then inverts the result. This darkens the top layer increasing the contrast to reflect the color of the bottom layer. The darker the bottom layer, the more its color is used.
hard-light
Combines the multiply and screen modes. Equivalent to overlay, but with the bottom and top images swapped.
soft-light
Softer version of hard-light
difference
Subtracts the bottom layer from the top layer or the other way round, to always get a positive value (i.e. subtracting the darker color from the lighter color). Blending with black produces no result, as the value will always be 0 (due to the RGB value for black being 0,0,0). Blending with white inverts the other layer's color.
exclusion
Similar to difference, but with lower contrast.
hue
Results in the hue of the top color, while using the saturation and luminosity of the bottom color.
saturation
Results in the saturation of the top color, while using the hue and luminosity of the bottom color.
color
Results in the hue and saturation of the top color, while using the luminosity of the bottom color.
luminosity
Results in the luminosity of the top color, while using the hue and saturation of the bottom color.

CSS Specifications

Browser Support

The following tables provided by Caniuse.com show the level of browser support for the properties that accept a <blend-mode> value.

mix-blend-mode

background-blend-mode