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:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 |
|
|
Lighten |
|
|
Contrast |
|
|
Composite |
|
|
Comparative |
|
|
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.