The background-blend-mode property is a CSS property. It gives us the ability to define how an element's background image blends with the background color.

Blend modes

There are several different blend modes available as property values for use with the background-blend-mode property.

• normal - Default blend mode (nothing is changed)

• multiply - Color is multiplied by the destination color and replaces the destination

• screen - Multiplies the complements of the backdrop and source color values, then complements the result

• overlay - Multiplies or screens the colors, depending on the backdrop color value

• darken - Selects the darker of the backdrop and source colors

• lighten - Selects the lighter of the backdrop and source colors

• difference - Subtracts the darker of the two constituent colors from the lighter color

• color-dodge - Brightens the backdrop color to reflect the source color

• saturation - Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color

• color - Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color

• luminosity -Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color

Read more about these and other blend modes here.

Using background-blend-mode

To experiment with this property we’ll be using this image of the Joker (figured it’d be relevant with Halloween around the corner 🎃). We’re going to test it out with some of the most popular values that are provided by background-blend-mode.

Let’s go over these values and show what they can do with examples. To start we’ll show a side-by-side comparison of our Joker without background-blend-mode and another one with it.

Here you can see we have the original image on the left and the blend mode version using the darken value on the right. Let’s check out what the code looks like below.

Now let’s try out some of the other blend mode values that are commonly used with this property.

background-blend-mode: screen;

the screen blend brightens the image by removing the darker parts of the color.

background-blend-mode: multiply;

The multiply blend is the opposite of screen. It multiplies the blending color with the base color resulting in a darker appearing image.

background-blend-mode: color-dodge;

The color-dodge blend makes the image brighter while also adding colors to it.

background-blend-mode: overlay;

The overlay blend combines both the multiply and screen blends resulting in a lighter or darker appearance depending on the backdrop color.

background-blend-mode: saturation;

The saturation blend maintains the saturation of the background image while combining the hue and luminosity of the background color.

background-blend-mode: difference;

The difference blend subtracts the base layer from the top layer. If blending with lighter colors or white this blend can invert the image’s color but with black, there will be no change.

Summary

This was an overview of the basics of the background-blend-mode property. There are other ways to use this property that we did not get into in this article such as its use with linear gradients, mixing multiple blend mode values, and the mix-blend-mode property.

The background-blend-mode property can be a great addition if you’re looking to spice up your website’s design. Hopefully, this article proved it to be a useful CSS property that can result in some great-looking background images!

More resources

• CSS background-blend-mode (W3)

• background-blend-mode (MDN)

• The ultimate guide to CSS blend modes

• CSS blending modes (Youtube)