CSS mix-blend-mode Property

img {
  mix-blend-mode: exclusion;
}

Meaning

The mix-blend-mode property sets how an element's content should blend with the content of the element's parent and the element's background.

Default value:	normal
Inherited:	No
Animatable:	No
Version:	CSS3
JavaScript syntax:	`object.style.mixBlendMode="normal\|multiply\|screen\|overlay\|darken\|lighten\|color-dodge\|color-burn\|difference\|exclusion\|hue\|saturation\|color\|luminosity";`

mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity;

The numbers in the table specify the first browser version that fully supports the property.

The following table describes the values of this property.

Value	Description
normal	This is default value. Defines the blending mode to normal.
multiply	Defines the blending mode to multiply.
screen	Defines the blending mode to screen.
overlay	Defines the blending mode to overlay.
darken	Defines the blending mode to darken.
lighten	Defines the blending mode to lighten.
color-dodge	Defines the blending mode to color-dodge.
color-burn	Defines the blending mode to color-burn.
difference	Defines the blending mode to difference.
exclusion	Defines the blending mode to exclusion.
hue	Defines the blending mode to hue.
saturation	Defines the blending mode to saturation.
color	Defines the blending mode to color.
luminosity	Defines the blending mode to luminosity.
initial	Sets this property to its default value.
inherit	If specified, the associated element takes the computed value of its parent element animation-delay property.
revert	Reverts the cascaded value of the property from its current value to the value the property
revert-layer	Rollback styles to the ones specified in previous cascade layers.
unset	Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

selectors {
  mix-blend-mode: normal;
}