mix-blend-mode property

The mix-blend-mode property specifies a blend mode of an original color with a background color or background image. Values for the property are similar to the main modes of graphic editors.

Syntax

selector {
	mix-blend-mode: values;
}

The table shows the main values for the mix-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 mix-blend-mode property:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: normal;
	width: 400px;
	height: 300px;
}

Example

Now let's change the blending mode to multiply:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: multiply;
	width: 400px;
	height: 300px;
}

Example

Let's set the mix-blend-mode property to the overlay value:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: overlay;
	width: 400px;
	height: 300px;
}

mix-blend-mode property

Syntax

Values

Example

Example

Example

See also