CSS background-blend-mode Property

The background-blend-mode property defines the blending mode of each background layer (color and/or image).

The property takes one or more blend modes as a value—this value specifies the formula used to blend or mix the colors of the background image with the color — or other background images — behind it.

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

If the element has multiple background layers, and you specify a (comma-separated) list of blend modes for these layers, the background-blend-mode list must be applied in the same order as background-image. This means that the first blend mode in the list will apply to the first background image in the list of background images—the layer that is on top. If a property doesn’t have enough comma-separated values to match the number of layers, the user agent must calculate its used value by repeating the list of values until there are enough.

background-blend-mode: normal|multiply|screen|darken|lighten|


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

Example -