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.
There are several different blend modes available as property values for use with the
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.
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
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.
screen blend brightens the image by removing the darker parts of the color.
multiply blend is the opposite of
screen. It multiplies the blending color with the base color resulting in a darker appearing image.
color-dodge blend makes the image brighter while also adding colors to it.
overlay blend combines both the
screen blends resulting in a lighter or darker appearance depending on the backdrop color.
saturation blend maintains the saturation of the background image while combining the hue and luminosity of the background color.
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.
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
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!