Blend modes

Description.

The blending mode defines how two overlapping layers should be combined. It can be the foreground and the background. The foreground is the content of the element. The background is to be taken broadly, as anything that is visible behind the element. It can be the background of the element itself, but also that of its parent or parents.

The blending modes are exploited by two properties:

mix-blend-mode: Sets how the content blends with what's visible in the background of the clip..
background-blend-mode: Defines the mixing of colors between background image(s) and background color..

Opacity and blending mode.

By default, the foreground hides the background: there is therefore no mixing in this case, the background being visible only through the transparent parts of the foreground. However, if the foreground is semi-transparent (opacity < 1), a kind of simple mixing is already implemented.

A non-normal blending mode can be specified with the mix-blend-mode properties or background-blend-mode. In this case, the result is obtained by a formula calculating the colors of the result point by point.

opacity:1;
mix-blend-mode:normal;

The background is only visible in the transparent parts of the foreground.

opacity:0.7;
mix-blend-mode:normal;

The foreground is semi-transparent: there is mixing in the non-transparent parts.

opacity:1;
mix-blend-mode:multiply;

Blending mode other than normal.
The two planes blend together in the non-transparent parts.

The same principle is found in mixing layers in Photoshop.

Calculations.

This chapter can easily be skipped. It details the calculation formulas used to manage the transparency of an element and/or blending modes. You can refer directly to the description of the different blending modes.

The formulas may seem complex at first glance, but in fact they only use very simple operations, such as the four basic operations: addition, multiplication, division and subtraction.

Color decomposition.

All existing colors are translated into a combination of three basic colors: red, green and blue (see our color synthesizer). This combination can be expressed in different ways: hexadecimal codes, decimal values, percentages. It is this last writing that will be the most practical for the rest of these explanations.

Pure blue
#0000ff
rgb(0% 0% 100%)

Pure red
#ff0000
rgb(100% 0% 0%)

Light blue
#ADD8E6
rgb(68% 85% 90%)

Grey
#808080
rgb(50% 50% 50%)

Transparency treatment.

If the foreground color isn't totally opaque, the background color will be a little bit noticeable throughout. The formula for obtaining the resulting color is as follows:

r = bk x (1 - α) + c1 x α

r = Component of the color of the result (red, green, or blue).
bk = Background color component.
c1 = Foreground color component.
α = Foreground opacity.

First color (background)
rgb(100% 80% 0%)

Red	=	1
Green	=	0.8
Blue	=	0
Opacity	=	1

Second color (foreground)
rgb(0% 75% 100% / 40%)

Red	=	0
Green	=	0.75
Blue	=	1
Opacity	=	0.4

Result
rgb(60% 78% 40%)

R	=	1 x 0.6 + 0 x 0.4	=	0.6
V	=	0.8 x 0.6 + 1 x 0.4	=	0.78
B	=	0 x 0.6 + 1 x 0.4	=	0.4

Blend modes.

To mix two colors, a formula is applied to the three components of each color. This formula is defined by the blending mode chosen. Let's take the multiply blending mode as an example:

First color
rgb(90% 80% 60%)

Red	=	0.9
Green	=	0.8
Blue	=	0.6

Second color
rgb(50% 80% 90%)

Red	=	0.5
Green	=	0.8
Blue	=	0.9

Result
rgb(45% 64% 54%)

R	=	0.9 x 0.5	=	0.45
V	=	0.8 x 0.8	=	0.64
B	=	0.6 x 0.9	=	0.54

Each of the results is then limited to the valid range of the colors, between 0% and 100%. Note: With multiply mode this range cannot be exceeded, but other modes could yield results outside the boundaries.

Now let's see what happens when using both a semi-transparent color and a blending mode. The transparency calculation (see above) applies after, and on the result of the merge calculation.

First color
rgb(90% 80% 60%)

Red	=	0.9
Green	=	0.8
Blue	=	0.6
Opacity	=	1

Second color
rgb(50% 80% 90% / 40%)

Red	=	0.5
Green	=	0.8
Blue	=	0.9
Opacity	=	0.4

Result
rgb(72% 73.6% 57.6%)

R	=	0.9x0.6 + 0.45x0.4	=	0.720
V	=	0.8x0.6 + 0.64x0.4	=	0.736
B	=	0.6x0.6 + 0.54x0.4	=	0.576

Blend-modes acting on RGB components.

In the following formulas...

bk is one of the components of the background color (red, green, or blue).
c1 is one of the components of the foreground color (red, green, or blue).
r is the corresponding component in the color of the result.

If the color in the foreground is not completely opaque, the formulas must be completed by using the opacity of the foreground. Example for multiply blending mode:

r = bk x c1 x α + bk x (1 - α)

normal

This mode is the default. There is no combination: the foreground hides the background. However, the latter can be visible in the transparent or semi-transparent parts of the foreground.

r = c1

#a0a0a0

#8080ff
lighten

Chooses the highest component as the result. If the red in the background has a value of 27, and the red in the foreground has a value of 15, the red in the result will have a value of 27. The same logic is applied to the green and blue components.

This does not mean that one of the two colors is found in the result, because one of the components (red, green or blue) can be the largest on the the background color, and another larger component on the foreground color.

r = max(bk, c1)

#a0a0a0

#8080ff
darken

Selects the lowest component as the result. It's the opposite of lighten. The same logic is applied to the three components red, green and blue.

As with lighten, we do not find one of the two colors in the result because one of the components (red, green or blue) can be the most small on the background, and another smaller component on the foreground.

r = min(bk, c1)

#a0a0a0

#8080ff
multiply

The R,G,B components of the background color are multiplied with those of the foreground color.

The resulting color will be darker than either of the two merged colors. With this blending mode, the neutral color is white: if one of the two colors is white, the result is identical to the other color. Conversely, if one of the colors is black, the result will be black, regardless of the second color.

r = bk x c1

#a0a0a0

#8080ff
difference

The R,G,B components of the background color are subtracted from those of the color of the foreground. Negative results are reversed (absolute value).

For the difference blending mode, the neutral color is black. The code for black being 0,0,0, we understand that subtracting 0 from any color does not change that color.
The white color results in the negative of the other color.

r = |bk - c1|

#a0a0a0

#8080ff
screen

This blending mode performs the following calculations:
1. Calculates the complements of the background color components.
2. The same goes for the foreground color.
3. Multiply these complementary ones between them.
4. Takes the complementary of the result.
screen blending mode, the neutral color is black: a color merged with black is not changed. White is an absorbent color: any color fused with white gives white.

r = 1 - ((1 - bk) x (1 - c1))

#a0a0a0

#8080ff
exclusion

Gives a similar rendering to the difference blending mode but with less contrast.

The neutral color is black for the exclusion blending mode. White reverses the other color (negative).

r = bk + c1 - 2 x bk x c1

#a0a0a0

#8080ff
hard-light

The hard-light blending mode applies a different treatment depending on the value of the foreground component.

if(c1 <= 0.5) r = bk x c1 x 2 else r = 1 - ((1 - bk) x (-2 x c1))

#a0a0a0

#8080ff
soft-light

The soft-light blending mode uses much more complex formulas.

if(c1 <= 0.5) r = bk - (1 - 2 x c1) x bk x (1 - c1) elseif(c1 <= 0.25) r = bk + (2 x c1 - 1) x (((16 x bk - 12) x bk + 4) x bk - bk) else r = bk + (2 x c1 - 1) x (sqrt(bk) - bk)

#a0a0a0

#8080ff
overlay

The overlay blending mode applies a symmetrical treatment to that of hard-light, that is to say that it uses the same formulas but reversing bk and c1.

if(bk <= 0.5) r = bk x c1 x 2 else r = 1 - ((1 - c1) x (-2 x bk))

#a0a0a0

#8080ff
color-dodge

This blending mode lightens the background color, based on the color of the foreground.

The color-dodge mode fusion formula can lead to a division by zero. For this reason, if one of the components of the foreground color is 0, we force the color component of the result is blank as well.

if(c1 == 1) r = 1 else r = min(1, bk / (1 - c1))

#a0a0a0

#8080ff
color-burn

This blending mode darkens the background color, based on the color of the foreground. So it's the opposite of color-burn mode.

Like the color-burn formula, the color-dodge formula can lead to division by zero. For this reason, if one of the components of the foreground color is black, we force the color component of the result to black.

if(c1 == 0) r = 0 else r = 1 - min(1, (1 - bk) / c1)

#a0a0a0

#8080ff

Blending modes that affect HSL color decomposition.

Colors can be defined by their RGB components (Red, Green, Blue) as we have seen, but also by their other parameters, which are hue, saturation and brightness (HSL system). See the color synthesizer.

The blending modes presented below work on the HSL parameters of the colors.

hue

Hue blending mode creates a color using the hue of the foreground color with brightness and saturation of the color of the background.

#a0a0a0

#8080ff
saturation

Saturation blending mode creates a color by using the saturation of the foreground color with brightness and hue of the color of the background.

#a0a0a0

#8080ff
luminosity

The luminosity blending mode creates a color using the brightness of the color of the foreground with the hue and saturation of the background color.

#a0a0a0

#8080ff
color

The color blending mode creates a color using the hue and saturation of the color of the foreground with the brightness of the background color.

#a0a0a0

#8080ff

Browser compatibility.

Blending modes (mixing several superimposed layers) are well supported by all major browsers today. Blending modes can be implemented with the mix-blend-mode and background-blend-mode properties.

Column 1

Supprt of mixing between layers.

Column 2

Browser compatibility with the mix-blend-mode property that ensures blending between the foreground and the background.

Column 3

Support for the value plus-darker applied to the property mix-blend-mode.

Column 4

Browser compatibility with the mix-blend-mode property applied to SVG elements.

Blend
modes

mix-blend-mode
property

plus-darker
value

On SVG
elements