The background-blend-mode property

The background-blend-mode property specifies the blend mode of a background image with a background color or other images. You can also specify multiple values in this property, separated by commas, which will be applied in the same order. The property values are similar to the main modes of graphic editors.

Syntax

selector {
	background-blend-mode: modes;
}

The table shows the main values for the background-blend-mode property:

Values

Value	Description
`normal`	Normal. No color blending is used. Default mode.
`multiply`	Multiplication. In this mode, the value of the primary color is multiplied by the value of the blend color. The resulting color is always the darker color.
`screen`	Lightening. In this mode, the inverse values of the primary and blend colors are multiplied. The lighter color is always used as the result color.
`overlay`	Overlap. In this mode, colors are multiplied or lightened depending on the primary color. Patterns or colors overlap existing pixels, leaving the light and dark areas of the primary color unchanged.

Example

Let's see what the image will look like with the default value of the background-blend-mode property:

<div id="elem"></div>

#elem {
	background-blend-mode: normal;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Example

Now let's change the value of the background-blend-mode property to multiply:

<div id="elem"></div>

#elem {
	background-blend-mode: multiply;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Example

Let's set our image to lighten mode:

<div id="elem"></div>

#elem {
	background-blend-mode: screen;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

The background-blend-mode property

Syntax

Values

Example

Example

Example

See also