Blend modes allow you to blend colors from two or more layers, which can be background images or background colors. This CSS data type can be used in the background-blend-mode and mix-blend-mode properties.

Syntax

background-blend-mode: <blend-mode>;
mix-blend-mode: <blend-mode>;
<blend-mode> = 
  normal
  multiply
  darken
  color-burn
  screen
  lighten
  color-doge
  overlay
  hard-light
  soft-light
  saturation
  luminosity
  difference
  exclusion

Blend modes

Darken type

Lighten type

Contrast type

Composite type

Comparative type

Resources

• MDN blend mode
• MDN background-blend-mode
• MDN mix-blend-mode