background-blend-mode property

Some people think that stunning image effects can be achieved only in graphic editors — nothing could be further from the truth. Adobe’s Photoshop did not invent blend modes and you can use them to style your image dynamically with CSS.

Blend modes are used to decide how elements’ backgrounds blend with each other. You can mix together not only colours but also images and gradients. Blend mode takes colours of two pixels which lay on the top of each other and combines them in different ways. The default value assigned to blend mode is intended to hide the lower layers with the top one.

The background-blend-mode property in CSS decides how an element's backgrounds blend with each other. The value is a list of blend modes that correspond to each background layer. You can add several backgrounds with different blend modes each but they should be defined in the same order. If the blending modes list has a different size than the properties list - it will be repeated or truncated until the lengths match.

The background-blend-mode offers many blend mode values to choose from:

• color - combines the luminance of the base element with the hue and saturation of the second one.
• color-burn - darkens the base colour resulting in an increase of the contrast. It has the opposite effect to color-dodge and is similar to multiply.

color-burn effect

• color-dodge - brightens the base colour decreasing contrast.
• darken - darkens the result by taking two overlapping pixels and selecting the darker one. Opposite to lighten blend mode.
• difference - compares two overlapping pixels and subtracts the colour with the greater brightness to always get a positive value. Most of the time, the result will have high contrast.
• exclusion - compares two overlapping pixels and subtracts the colour with less brightness. Most of the time the result will have a lower contrast.

exclusion effect

• hard-light - has two different effects which depend on the power of the lightness of the top layer. If the blend colour is lighter than 50% grey - the result will be lightened. Otherwise, it will be darkened.
• hue - combines the luminosity and saturation of the base element with the hue of the second one.
• lighten - lightens the result by comparing two overlapping pixels and choosing the lighter one. Has the opposite effect to darken.

lighten effect

• luminosity - preserves top colour while using the saturation and hue of the one below. Has the opposite effect to color.
• multiply - multiplies the base pixel by the blend colour resulting in making it darker. When you multiply by black the result will be a black image while doing it with white colour - layer will stay untouched.

multiply effect

• normal - the first background value won't be affected by the second one.
• overlay - reflects the lightness or the darkness of the background which will make light colours lighter and dark colours - darker. Depends on the base colour.
• saturation - keeps the saturation of the element's base colour and mixes it with the hue and luminosity of the second one.

saturation effect

• screen - element's colours get inverted, multiplied and inverted again. This means that using screen on the white layer will result in the white image but on a black one - the image will be untouched. It has the opposite effect to multiply mode.
• soft-light - it is similar to hard-light mode but the final effect is much softer and as if a subtle diffused spotlight was put on the image.

Check out an example of all of them below:

background-blend-mode examples

Please note that this property is not compatible with Edge and Internet Explorer. For more information, you should check the official documentation.

Originally published at https://itsmenatalie.com on August 11, 2019.