CSS mix-blend-mode property

Property values

normalDefault

No blending is applied.

mix-blend-mode: normal;

multiply

It multiplies the backdrop (image) with the source (background-color) and replaces those changes in the backdrop.

mix-blend-mode: multiply;

screen

It multiplies the backdrop (image) with the source color and then complements.

mix-blend-mode: screen;

overlay

It multiplies or screens the colors depending on the backdrop (image) color.

mix-blend-mode: overlay;

darken

It selects the darker color of the backdrop (image).

mix-blend-mode: darken;

lighten

It selects the lighten color of the backdrop (image).

mix-blend-mode: lighten;

color-dodge

It brightens the backdrop (image) to reflect the source color.

mix-blend-mode: color-dodge;

color-burn

It darkens the backdrop (image) to reflect the source color.

mix-blend-mode: color-burn;

hard-light

It multiplies or screens the colors depending on the source color.

mix-blend-mode: hard-light;

soft-light

It darkens or lightens the colors depending on the source color.

mix-blend-mode: soft-light;

difference

It subtracts darker color from the lighter color.

mix-blend-mode: difference;

exclusion

It produces the same effect but lower in contrast.

mix-blend-mode: exclusion;

hue

It creates a color with the hue of source color and the saturation and luminosity of the backdrop (image).

mix-blend-mode: hue;

saturation

It creates a color with the saturation of source color and the hue and luminosity of the backdrop (image).

mix-blend-mode: saturation;

color

It creates a color with the hue and the saturation of the source color and luminosity of the backdrop (image).

mix-blend-mode: color;

luminosity

It creates a color with the luminosity of the source color and the hue and saturation of the backdrop (image).

mix-blend-mode: luminosity;