CSS mix-blend-mode property

Property values

normalDefault

No blending is applied.

mix-blend-mode: normal;

Try it { }

multiply

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

mix-blend-mode: multiply;

Try it { }

screen

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

mix-blend-mode: screen;

Try it { }

overlay

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

mix-blend-mode: overlay;

Try it { }

darken

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

mix-blend-mode: darken;

Try it { }

lighten

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

mix-blend-mode: lighten;

Try it { }

color-dodge

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

mix-blend-mode: color-dodge;

Try it { }

color-burn

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

mix-blend-mode: color-burn;

Try it { }

hard-light

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

mix-blend-mode: hard-light;

Try it { }

soft-light

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

mix-blend-mode: soft-light;

Try it { }

difference

It subtracts darker color from the lighter color.

mix-blend-mode: difference;

Try it { }

exclusion

It produces the same effect but lower in contrast.

mix-blend-mode: exclusion;

Try it { }

hue

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

mix-blend-mode: hue;

Try it { }

saturation

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

mix-blend-mode: saturation;

Try it { }

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;

Try it { }

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;

Try it { }