background-blend-mode

The background-blend-mode property describes how the element’s background image should overlay the backgrounds of other elements.

Initial Value normal
Applies to All elements, including ::first-letter and ::first-line
Inheritance no
Animation discrete

The background-blend-mode property specifies the background-color or background-image rendering mode. This allows combining multiple background dyes on top of one another.

The CSS background specification is structured so the first background is displayed at the front and overlaps downwards in sequence.

The background-blend-mode list must be applied in the same order as background-image [CSS3BG]. This means that the first element in the list will apply to the layer that is on top. If a property doesn’t have enough comma-separated values to match the number of layers, the UA must calculate its used value by repeating the list of values until there are enough. – W3

Syntax

The complete list of all blend modes is listed below the syntax example.

/* Keyword value */

background-blend-mode: normal;
background-blend-mode: multiply;
background-blend-mode: overlay;

/* Specify for each background */

background-blend-mode: screen, color;

/* Global value */

background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: revert;
background-blend-mode: unset;

Description

MeaningDescription
normalSets the blend mode to normal. This value is set by default.
multiplySets the multiply blending mode (fading mode).
screenSets the screen blending mode (lightening mode).
overlaySets the overlay blending mode (contrast mode).
darkenSets the blending mode to darken (blackout mode).
lightenSets the blending mode to lighten (lightening mode).
color-dodgeSets the color-dodge blending mode (lightening mode).
color-burnSets the color-burn blending mode (darkening mode).
hard-lightSets the hard-light blending mode (contrast mode).
soft-lightSets the soft-light blending mode (contrast mode).
differenceSets the blending mode to difference (comparison mode).
exclusionSets the exclusion blending mode (comparison mode).
hueSets the blending mode to hue (component mode).
saturationSets the saturation blending mode (component mode).
colorSets the blend mode to color (component mode).
luminositySets the luminosity blending mode (component mode).

Example

Select Blend Mode:

















CSS:

.blend-mode {
background-blend-mode: normal;
background-image: url('https://stackdiary.com/wp-content/uploads/2022/09/logo@2x.png');
background-color: orange;
background-position: center;
background-size: contain;
height: 175px;
}

Result: