CSS background-blend-mode Property

Last Updated : 23 Aug, 2024

The background-blend-mode Property defines how the element's background image should blend with each other and with the element's background-color.

Syntax:

background-blend-mode: normal|multiply|screen|darken|lighten|
color-dodge|saturation|difference|luminosity|overlay;

Default Value:

normal

Property:
Normal: This is the default value. It sets the blending mode to normal.

Syntax:

background-blend-mode: normal;

Example:

Output:

👁 Image

Multiply: It sets the blending mode to multiply. This leads to a darker image than before.

Syntax:

background-blend-mode: multiply;

Example:

Output:

👁 Image

Screen:It sets the blending mode to screen. In this mode both image and color is inverted, multiplied and then inverted. again.

Syntax:

background-blend-mode: screen;

Example:

Output:

👁 Image

Darken: It sets the blending mode to darken. In this mode if the background-image is darker than the background-color then the image is replaced, otherwise, it is left as it was.

Syntax:

background-blend-mode: darken;

Example:

Output:

👁 Image

Lighten: It sets the blending mode to lighten. In this mode if the background-image is lighter than the background-color then the image is replaced, otherwise, it is left as it was.

Syntax:

background-blend-mode: lighten;

Example:

Output:

👁 Image

Color-Dodge: It sets the blending mode to color-dodge. In this mode, the background-color is divided by the inverse of the background-image. This is very similar to the screen blend mode.

Syntax:

background-blend-mode: color-dodge;

Example:

Output:

👁 Image

Saturation: It sets the blending mode to lighten. This mode keeps the saturation of the background-image whilst mixing the hue and luminosity of the background color.

Syntax:

background-blend-mode: saturation;

Example:

Output:

👁 Image

Difference: It sets the blending mode to difference. This mode is the result by subtracting the darker color of the background-image and the background-color from the lightest one. Often the image will have very high contrast.

Syntax:

background-blend-mode: difference;

Example:

Output:

👁 Image

Luminosity: It sets the blending mode to luminosity. In this mode, the luminosity of the top color is preserved whilst using the saturation and hue of the background-color.

Syntax:

background-blend-mode: luminosity;

Example:

Output:

👁 Image

Overlay: It sets the blending mode to overlay. In this mode, the background-color is mixed with the background-image to reflect the lightness or darkness of the backdrop.