Blend Modes

The blend modes are keywords that define formulas for combining two colors. They are calculated pixel-by-pixel for two overlapping graphic layers.

Blending is defined as a combination of a top layer (source) and a backdrop. The backdrop may have been generated from multiple lower layers, after blending them together as required.

Blend modes are used in the <feBlend> filter operation, and in the mix-blend-mode and background-blend-mode CSS properties.

For <feBlend>, in is the source and in2 is the backdrop.
For mix-blend-mode, the backdrop is the accumulation of all lower layers of elements in the branch of the layout tree defined by the nearest ancestor that is isolated (according to the isolation CSS property).
For background-blend-mode, the backdrop is the accumulation of all lower layers of background images and the solid background color.

The blending calculation has two steps:

First, the two color values (RGB channels) for each pixel are combined using the formula defined by the chosen mode.
Second, that result is scaled by the alpha level (opacity) of the layers, and recombined with the original colors. Transparency in the backdrop reduces the impact of the blended color, replacing it with the original color from the top layer. Transparency in the top layer lets the back layer show through. If both layers are opaque, there is no scaling, and the final result is the result from the first step.

This means that if one layer is completely transparent at any point, the final result for that pixel will be the color of the other layer.

For <feBlend>, the results of the color calculations depend on the color-interpolation-filters property. For the CSS properties, color interpolation uses the video card’s working color space, which is usually sRGB but could be a more extensive color space (on newer monitors).

The following alphabetical list describes how to compute the blended color for each mode, in qualitative terms, assuming both layers are opaque. The exact formulas can be found in the Compositing and Blendling specification.

color#: Constructs a new color that has the hue and saturation of the top layer but the “luminosity” (which is like luminance, but uses a different formula) of the backdrop.
color-burn#: “Under-exposes” the backdrop according to the darkness of the top layer (like a photograph that didn’t get enough light). The blended color is the result of scaling down the color from the backdrop, in each channel (R, G, and B), such that it will never be greater than that channel’s value from the top layer. (It’s called burn, even though it makes things darker, because in film photography, you create this effect by focusing extra light on the final print.)
color-dodge#: “Over-exposes” the backdrop according to the lightness of the top layer (like a photograph that had too much light for the film). The color from the backdrop is scaled up in each channel (R, G, and B) such that it will never be less than that channel’s value from the top layer.
darken#: Constructs a new color that uses the minimum value for each channel (R, G, and B) from the top layer and the backdrop.
difference#: Constructs a new color where the value for each channel (R, G, and B) is the absolute difference between the values for that channel in top layer versus the backdrop.
exclusion#: Creates an effect similar to difference but not as extreme. For each channel (R, G, and B), the new value is the sum of the values from the two layers minus twice their product (after converting percentages to values from 0 to 1).
hard-light#: Creates the effect of shining a bright light in the pattern of the top layer onto the backdrop, where this is the only light shining on the backdrop (if the top layer is opaque) and the backdrop reflects bright light. For each channel (R, G, and B) in the top layer, it is equivalent to either multiply or screen, depending on whether that channel is less than or greater than 50%.
hue#: Adjusts the color of the backdrop to match the hue of the top layer, preserving its saturation and “luminosity”. However, the formulas are different from both HSL colors and hue-rotate filters. Also, if the top layer has zero saturation (pure white/gray/black) then the blended color is desaturated, too.
lighten#: Constructs a new color that uses the maximum value for each channel (R, G, and B) from the top layer and the backdrop.
luminosity#: Adjusts the color of the backdrop to match the “luminosity” (which is like luminance, but the formulas are different) of the top layer.
multiply#: Creates the effect of light passing through two colored slides stacked together. For each channel (R, G, and B), the blended color is the values from the two layers multiplied together, after converting percentages to values from 0 to 1. The final blended value (the difference from black) is always equal or less than the starting values.
normal#: uses the color of the top layer as the blended color (when is then scaled according to the top-layer’s transparency).
overlay#: Creates an effect equivalent to hard-light, but with the layers swapped. This means multiply if the bottom layer is dark (for each channel independently) and screen if it is bright.
saturation#: Adjusts the color of the backdrop to match the saturation of the top layer; however, the saturation formulas are different from HSL colors and filters.
screen#: Creates the effect of shining two different image projections onto the same screen. For each channel (R, G, and B), the difference between the layer values and 100% are multiplied together. The final values are always the same or increased from the originals (the difference from white is the same or reduced).
soft-light#: Creates the effect of shining light in the pattern of the top layer on to an already reasonably-well lit version of the backdrop. The colors of the bottom layer are shifted towards the colors from the top layer, with the exact formulas changing according to the brightness of both layers.