CSS background-blend-mode
This CSS property sets the blend mode for each background layer (image/color) of an element. It defines how the background image of an element blends with the background color of the element. We can blend the background images together or can blend them with background-color.
This property is not supported in Edge/Internet Explorer.
Syntax
This property has numerous property values. Let’s discuss the above blend modes with an example of each.
normal
It is the default value which sets the property mode to normal.
multiply
It multiplies the background-color and background-images and leads to a darker image than before. It is used to set the blending mode to multiply.
Example
screen
It is used to set the blending mode to screen and inverts both image and color. This effect is like displaying two images on the projection screen.
Example
color-dodge
It is similar to the screen blend mode. It is used to set the blending mode to color-dodge. The final result of this mode is the result of dividing the background-color by the inverse of the background-image.
Example
difference
It is used to set the blending mode to difference. Its final result is the result of subtracting the dark color from the lightest one.
Example
darken
It is used to set the blending mode to darken.
Example
lighten
It is used to set the blending mode to lighten.
Example
Saturation
Its final result is the saturation of the top color, while using the hue and luminosity of the bottom color.
Example
luminosity
It is used to set the blending mode to luminosity. Its final result is the luminosity of the top color, while using the hue and saturation of the bottom color.
Example
overlay
It is used to set the blending mode to overlay.
Example
hard-light
It is used to set the blending mode to hard-light.
Example
soft-light
It is used to set the blending mode to soft-light.
Example
exclusion
It is used to set the blending mode to exclusion.
Example
hue
Its result is the combination of the hue of the background-image with the luminosity and saturation of the background-color.
Example
color-burn
It is used to set the blending mode to color-burn.
Example
color
It is used to set the blending mode to color. It keeps the luminosity of the background-color and the hue and saturation of the background-image.
Example