Javatpoint Logo
Javatpoint Logo

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

Test it Now

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

Test it Now

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

Test it Now

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

Test it Now

darken

It is used to set the blending mode to darken.

Example

Test it Now

lighten

It is used to set the blending mode to lighten.

Example

Test it Now

Saturation

Its final result is the saturation of the top color, while using the hue and luminosity of the bottom color.

Example

Test it Now

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

Test it Now

overlay

It is used to set the blending mode to overlay.

Example

Test it Now

hard-light

It is used to set the blending mode to hard-light. 

Example

Test it Now

soft-light

It is used to set the blending mode to soft-light.

Example

Test it Now

exclusion

It is used to set the blending mode to exclusion. 

Example

Test it Now

hue

Its result is the combination of the hue of the background-image with the luminosity and saturation of the background-color.

Example

Test it Now

color-burn

It is used to set the blending mode to color-burn.

Example

Test it Now

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

Test it Now

Next TopicCSS Radio Button




Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA