In this section, we will learn what the mix-blend-mode property is and how to use it in CSS.

Click here to run the example of mix-blend-mode property.

CSS mix-blend-mode Property Definition and Usage

When we use CSS `background-blend-mode` property, we can only blend background color and images of ONE ELEMENT ONLY.

But CSS provided another property named `mix-blend-mode` by which we can blend multiple elements.

This allows us to blend text, borders, background color of one element with a background image of its container, for example.

CSS mix-blend-mode Property Syntax

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

CSS mix-blend-mode Property Value

All the values used for `background-blend-mode` property can also be applied to the `mix-blend-mode` as well.

There are 15 values that can be set for this property. Each uses different mathematical calculations to control how images are blended:

multiply	screen	overlay	darken	lighten
color-dodge	color-burn	hard-light	soft-light	difference
exclusion	hue	saturation	color	luminosity

The best way to learn how these values can blend the two or more background images is to check the two small app that we’ve built in the `background-blend-mode` section and see the effects of these values in real time.

The table below gives a description of each of the values used for `background-blend-mode` property:

Type of effect	Blend modes	Description
Darken	multiply darken color-burn	The lighter the front color, the more the base color will show through Selects darker of the two colors Darkens the base color, increasing contrast.
Lighten	screen lighten color-dodge	The darker the front color, the more the base color will show through Selects the lighter of the colors Lightens base color, decreasing contrast
Contrast	overlay hard-light soft-light	Increases contrast by applying ‘multiply’ to dark colors and ‘screen’ to light colors, at half strength Greatly increases contrast. Like ‘overlay’, but applies ‘multiply’ or ‘screen’ at full strength Similar to ‘hard-light’, but uses burn/dodge instead of multiply/screen
Composite	hue saturation luminosity color	Applies hue from the top color onto the bottom color. Applies saturation from the top color onto the bottom color Applies luminosity from the top color onto the bottom color. Applies hue and saturation from the top color onto the bottom color
Comparative	difference exclusion	Subtracts the darker color from the lighter one Similar to ‘difference’, with less contrast

This table is taken from the “CSS in Depth” book (Manning publication).

Note: there’s another value that we can set for this value which is “normal”. This is the default value and it is neutral (no blending).

Of course, the two global values “initial” and “inherit” can also be used for this property.

Example: mix-blend-mode in CSS

See the Pen mix-blend-mode in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

Example: mix-blend-mode property exclusion

See the Pen mix-blend-mode property exclusion by Omid Dehghan (@enjoytutorials1) on CodePen.

Example: CSS mix-blend-mode property saturation value

See the Pen CSS mix-blend-mode property saturation value by Omid Dehghan (@enjoytutorials1) on CodePen.

Example: CSS mix-blend-mode property luminosity

See the Pen CSS mix-blend-mode property luminosity by Omid Dehghan (@enjoytutorials1) on CodePen.