CSS mix-blend-mode Property

The CSS mix-blend-mode property of an element is used to specify the blending of an element's background with the element's parent. 

Syntax:

 mix-blend-mode: normal | multiply | exclusion 
 | overlay | lighten | darken 
 | color-dodge | color-burn 
 | hard-light | soft-light 
 | difference | hue 
 | saturation | color | screen 
 | luminosity

Values:

• initial - the default setting, this does not set a blend mode.
• inherit - this inherits the blend mode of its parent element.
• unset - this removes the current blend mode from the element.
• normal - no blending is applied to the element. 

• Output:

👁 mix-blend-mode: normal

• multiply - this multiplies the element's color with the background. The resulting color is always as dark as the background. 

• Output:

👁 mix-blend-mode: multiply

• screen - this multiplies the element's color with the background and then complements the result. The resulting color is always as bright as one of the blended layers. 

• Output:

👁 mix-blend-mode: screen

• exclusion - this subtracts the darker of two colors from the lightest color of the element. The result is similar to 'difference' but with a lower contrast. 

• Output:👁 mix-blend-mode: exclusion
  
• overlay - this applies 'multiply' on lighter colors and 'screen' on darker colors in the element. The effect is effectively the opposite of 'hard-light'. 

• Output:👁 mix-blend-mode: overlay
  
• lighten - this replaces the background with the element's color where the element is lighter. 

• Output:👁 mix-blend-mode: lighten
  
• darken - this replaces the background with the element's color where the element is darker. 

• Output:👁 mix-blend-mode: darken
  
• color-dodge - this lightens the background color to reflect the color of the element. 

• Output:👁 mix-blend-mode: color-dodge
  
• color-burn - this darkens the background color to reflect the natural colors of the image. The result has increased amount of contrast between the element and the background.