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

Blending two images:

Click here to run the example.

Blending one image with background color:

Click here to run the example.

CSS background-blend-mode Property Definition and Usage

When we set multiple images for the background of an element, by default, those images that listed first will sit in front of those that come afterwards. But in most cases, we want the two images to be visible to the audience and not just one of them.

This is where blending comes in.

CSS provided a property named `background-blend-mode` by which we can blend two background images and create an illusion of merged images.

Note: The `background-blend-mode` property also can be used to blend background-image and background-color as well.

CSS background-blend-mode Property Syntax

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

CSS background-blend-mode Property Value

There are 15 values that can be set for this property. Each uses a different mathematical calculation to control how images should be 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 use them in practice. So for this reason we have created two simple apps and putted at the beginning of this section.

The first one, “blending two images,” allows you to upload two images and select each of these values to see how the two images blend together.

The second app “Blending one image with a background color”, it allows you to upload one image and change background color and then select each of these values to see how background image and background color blend together.

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 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: background-blend-mode property in CSS

See the Pen background-blend-mode property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

Example: CSS background-blend-mode property multiply

See the Pen CSS background-blend-mode property multiply by Enjoy Tutorials (@enjoytutorials) on CodePen.

Example: CSS background-blend-mode property difference

See the Pen CSS background-blend-mode property difference by Enjoy Tutorials (@enjoytutorials) on CodePen.

Example: CSS background-blend-mode property hard-light value

See the Pen CSS background-blend-mode property hard-light value by Enjoy Tutorials (@enjoytutorials) on CodePen.