Blending Background Images Using The
background-blend-mode property, as its name suggests, is used to specify a blend mode for an element’s background layer. A background layer can be an image, or the background color.
If the element has more than one background image, you can specify multiple blend modes—each blend mode will be used for a background image such that the first blend mode in the list corresponds to the first background image in the list of background images, and so on.
background-image: url(first-image.png), url(second-image.png); background-color: orange; background-blend-mode: screen, multiply;
The second-image.png background will blend with the background color using the
multiply mode, and then the first-image.png background will blend with the second image and the background color using the screen blend mode. (Reminder: the first background image in the list is the one on top, and the ones following it are beneath it.)
The background images will only blend with each other—they will not blend with any content that lies underneath the element itself.
There are 16 blend modes available in CSS:
normal (which is the default blend mode and means that no blending is applied),
The following image shows a set of results achieved when applying the above mentioned blend modes to an image. The image is being blended with a red background color. The order of blending operations from the top left corner of the image is the same as the order mentioned in the list above.