Home / CSS Almanac / Properties / M / mix-blend-mode

mix-blend-mode

The mix-blend-mode property defines how an element’s content should blend with its background. This means that any images or text, borders or headings will be influenced by this property. For example:

.blend {
  mix-blend-mode: exclusion;
}

See the Pen mix-blend-mode demo by CSS-Tricks (@css-tricks) on CodePen.

In the example above the content has been modified by the mix-blend-mode so that the colors of the text are excluded from its background. This is just one of many values for this property.

There is an issue with Chrome 58+ where mix-blend-mode will not render on elements that are set on a transparent <body>. The has been ticketed as Issue 711955 in Chrome, which is assigned at the time of this writing. In the meantime, a simple fix is to assign a white (or really, any) background color to the body element.

Values

  • initial: the default setting of the property that does not set a blend mode.
  • inherit: an element will inherit the blend mode from its parent element.
  • unset: removes the current blend mode from an element.
  • <blend-mode>: this is the attribute of one of the blend modes beneath:
  • normal: this attribute applies no blending whatsoever.
  • multiply: the element is multiplied by the background and replaces the background color. The resulting color is always as dark as the background.
  • screen: multiplies the background and the content then complements the result. This will result in content which is brighter than the background-color.
  • overlay: multiplies or screens the content depending on the background color. This is the inverse of the hard-light blend mode.
  • darken: the background is replaced with the content where the content is darker, otherwise it is left as it was.
  • lighten: the background is replaced with the content where the content is lighter.
  • color-dodge: this attribute brightens the background color to reflect the color of the content.
  • color-burn: this darkens the background to reflect the content’s natural color.
  • hard-light: depending on the color of the content this attribute will screen or multiply it.
  • soft-light: depending on the color of the content this will darken or lighten it.
  • difference: this subtracts the darker of the two colors from the lightest color.
  • exclusion: similar to difference but with lower contrast.
  • hue: creates a color with the hue of the content combined with the saturation and luminosity of the background.
  • saturation: creates a color with saturation of the content combined with the hue and luminosity of the background.
  • color: creates a color with the hue and saturation of the content and the luminosity of the background.
  • luminosity: creates a color with the luminosity of the content and the hue and saturation of the background. This is the inverse of the color attribute.

It’s worth noting that setting a blend mode other than normal will generate a new stacking context which must then be blended with the stacking context that contains the element.

The effect of these values are shown in the demo below:

See the Pen mix-blend-mode by CSS-Tricks (@css-tricks) on CodePen.

Related properties

More information

Browser Support

Chrome Safari Firefox Opera IE Android iOS
41+ 7.1 + * 35+ None None None 8.1+ *

* Safari and iOS Safari do not currently support the hue, saturation, color and luminosity values