mix-blend-mode

Avatar of Robin Rendle
Robin Rendle on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

The mix-blend-mode property defines how an element’s content should blend with its background. For example, the text of a <h1> could blend with the background behind it in interesting ways.

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

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 . 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 the 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:

More information

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
4132No79TP

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
12212312217.4