mix-blend-mode

The mix-blend-mode property designates how an element’s content will blend with its parent element’s background.

Syntax

Example:

.wrap {
  background-color: blue;
}

.wrap img {
  mix-blend-mode: multiply;
}

Values

normal
Default value. Sets blending mode to normal.

multiply
Sets blending mode to multiply.

screen
Sets blending mode to screen.

overlay
Sets blending mode to overlay.

darken
Sets blending mode to darken.

lighten
Sets blending mode to lighten.

color-dodge
Sets blending mode to color-dodge.

color-burn
Sets blending mode to color-burn.

difference
Sets blending mode to difference.

exclusion
Sets blending mode to exclusion.

hue
Sets blending mode to hue.

saturation
Sets blending mode to saturation.

color
Sets blending mode to color.

luminosity
Sets blending mode to luminosity.

Browser Compatibilty

Demos

Have a code example of mix-blend-mode? Submit a codepen.io demo and we'll showcase it here ↴