mix-blend-mode | CSS CSS Properties

Sets how an element's content should blend with the content of the element's direct background (parent).

Quick example

.text-overlay {
  mix-blend-mode: multiply;
  /* blends the text color into the background image underneath */
}

Initial value

normal

Inherited

Applies to

all elements

Animation type

notAnimatable

plus-darkerplus-lighter

Widely available Since 2020 96% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.

Safe to use without fallbacks.

41+

32+

79+