1. css
  2. /properties
  3. /mix-blend-mode

mix-blend-mode

Definition

The mix-blend-mode property sets how the content of an element should blend with its background or with the content of the element behind it. It is used to create effects like screen overlays, color burn, or multiply.

Examples

Using mix-blend-mode to create a screen overlay effect:

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  mix-blend-mode: screen;
}

Using mix-blend-mode to create a color burn effect:

.color-burn {
  background-color: #f00;
  mix-blend-mode: color-burn;
}

Using mix-blend-mode to create a multiply effect:

.multiply {
  background-color: #00f;
  mix-blend-mode: multiply;
}

Values

ValueDescription
normalDefault value. The element's content is drawn on top of the background.
multiplyThe element's content is multiplied with the background.
screenThe element's content is screened onto the background.
overlayThe element's content is overlaid onto the background.
darkenThe darker of the element's content and the background is displayed.
lightenThe lighter of the element's content and the background is displayed.
color-dodgeThe element's content is color-dodged with the background.
color-burnThe element's content is color-burned with the background.
hard-lightThe element's content is applied to the background as if it were a hard light.
soft-lightThe element's content is applied to the background as if it were a soft light.
differenceThe difference between the element's content and the background is displayed.
exclusionThe exclusion of the element's content and the background is displayed.
hueThe hue of the element's content is applied to the background.
saturationThe saturation of the element's content is applied to the background.
colorThe color of the element's content is applied to the background.
luminosityThe luminosity of the element's content is applied to the background.
<custom-ident>A custom blending mode defined using the @layer at-rule.

Best Practices

  • Use mix-blend-mode sparingly, as it can cause performance issues, especially on complex or animated elements.
  • Choose the appropriate blending mode for your desired effect. Experiment with different blending modes to find the one that works best for your design.
  • Be mindful of contrast and legibility when using mix-blend-mode. Some blending modes can make text or other content difficult to read.
  • Use mix-blend-mode in conjunction with other CSS properties, such as opacity, background-color, and border-radius, to create interesting and unique effects.
  • Test your designs on different browsers and devices to ensure compatibility.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesNoYesYes