backgroundblendmode

The background-blend-mode CSS property specifies how the content of a background layer should blend with the content of the background layers beneath it. It can also be used to blend the background of an element with the background of its parent element. This property allows for creative effects by defining the blending algorithm used.

Common blending modes include normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity. Each mode has a distinct mathematical formula that dictates how the colors of the two layers interact. For instance, multiply darkens the image based on the darkest values, while screen lightens it based on the lightest values. Overlay increases contrast by screening or multiplying depending on the base layer's color.

The background-blend-mode property is applied to an element that has multiple background layers defined, such as those set with the background-image property using multiple URLs or with gradients. If an element has only a single background image, background-blend-mode will not have any effect. The property's value can be a single blend mode or a space-separated list of blend modes, allowing for different blending effects for each background layer. The first blend mode in the list applies to the top background layer, and subsequent modes apply to layers below it.