CSS Property background-blend-mode

The background-blend-mode property is employed to specify the mix mode for every background layer of a part.

Using the background-blend-mode property, you’ll mix the background layers (images and color) of a part.

The property takes one or a lot of mix modes as a price—this value specifies the formula wont to mix or combine the colours of the background image with the colour — or alternative background pictures — behind it.

Each background layer should mix with the element’s background layer that’s below it and also the element’s background color. Background layers should not mix with the content that’s behind the part, instead they have to act as if they’re rendered into AN isolated cluster.

If the part has multiple background layers, and you specify a (comma-separated) list of mix modes for these layers, the background-blend-mode list should be applied within the same order as background-image. this implies that the primary mix mode within the list can apply to the primary background image within the list of background images—the layer that’s on prime. If a property doesn’t have enough comma-separated values to match the quantity of layers, the user agent should calculate its used price by repetition the list of values till there ar enough.

If the background shorthand is employed, the background-blend-mode property for that part should be reset to its initial price.

CSS Property background-blend-mode Value

  • <blend-mode>


Refer to the <blend-mode> entry for a list of possible values.

Desktop Browser Support

Mobile Browser Support


.class {
    background-image: url(dummy.jpg);
    background-blend-mode: luminosity;

One comment

  1. This really answered my problem, thank you!

Leave a Reply