Background-blend-mode

The background-blend-mode property sets a blend mode of the component’s every background layer (color/image). It illustrates how the element background image blends well with the element background color. We can use this property to blend images in the background together or blend them with the background color.

The Edge/Internet Explorer does not provide its support to this property.

Syntax:

This CSS attribute has a huge number of property values, which are discussed and explained below.

normal: This value is a default value. It sets the mode of the property to normal.

multiply: It can multiply the background image and background color and manage the darker image as compared to before. It sets the mode of blending to multiply.

Example:

Output:

CSS Background blend mode

Screen: It sets the mode of blending to screen and change both color and image. Its effect is similar as displaying two images over any projection screen.

Example:

Output:

CSS Background blend mode

color-dodge: The screen mode is quite similar to this property value. It sets the mode of blending to color-dodge. This mode will produce the outcome by dividing the color of background by transposing the image in the background.

Example:

Output:

CSS Background blend mode

difference: It sets the mode of blending to difference. This mode will produce the outcome by subtracting any dark color from any lightest one.

Example:

Output:

CSS Background blend mode

darken: It sets the mode of blending to darken.

Example:

Output:

CSS Background blend mode

lighten: It sets the mode of blending to lighten.

Example:

Output:

CSS Background blend mode

saturation: Its ultimate result will be the color of top saturation, while with the use of luminosity and hue of the color of bottom.

Example:

Output:

CSS Background blend mode

luminosity: This value sets the mode of blending to luminosity. Its ultimate result will be the color of top luminosity, while with the use of saturation and hue of the color of bottom.

Example:

Output:

CSS Background blend mode

overlay: This property value sets the mode of blending to overlay.

Example:

Output:

CSS Background blend mode

hard-light: This value sets the mode of blending to the hard-light.

Example:

Output:

CSS Background blend mode

soft-light: This value sets the mode of blending to the soft-light.

Example:

Output:

CSS Background blend mode

exclusion: It sets the mode of blending to exclusion.

Example:

Output:

CSS Background blend mode

hue: Its outcome is the hue’s background-image combination along with the saturation and luminosity of any background-color.

Example:

Output:

CSS Background blend mode

color-burn: It sets the mode of blending to color-burn.

Example:

Output:

CSS Background blend mode

Color: It can set the mode of blending to color. It carries the saturation and hue of any background-image and any background-color’s luminosity.

Example:

Output:

CSS Background blend mode

Pin It on Pinterest

Share This