HTML & CSS reference

mix-blend-mode

How the colors of an element mix with what lies beneath it, as layer modes in a graphics editor.

Syntax

mix-blend-mode: value;

Values

Parameter	Type	Description
normal	keyword	No mixing (the default).
multiply	keyword	Multiplies colors — the result is darker.
screen	keyword	The opposite of multiply — the result is lighter.
difference \| overlay	keyword	Other modes: difference inverts, overlay adds contrast.

Examples

Text that inverts the photo under it:

<style>
  .photo { background: url(/media/photo-600x200.jpg) center / cover; padding: 20px; }
  .photo h2 { margin: 0; font-size: 40px; color: white; mix-blend-mode: difference; }
</style>
 
<div class="photo"><h2>Difference</h2></div>

Overlapping circles mixing like inks:

<style>
  .circle { width: 80px; height: 80px; border-radius: 50%; display: inline-block; mix-blend-mode: multiply; }
</style>
 
<div class="circle" style="background: cyan;"></div><div class="circle" style="background: magenta; margin-left: -30px;"></div><div class="circle" style="background: yellow; margin-left: -30px;"></div>

Notes

To blend layers of one element's background with each other, use background-blend-mode.

In the tutorial

Filters — The filter property — blur, black and white, brightness, contrast and the contour shadow drop-shadow, plus backdrop-filter for a frosted glass effect.

Thanks for reading!