The background-blend-mode property in CSS
Tags: webdev, css
Published: 2021-09-25 23:59:35

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](https://sab.webflow.io/blend-modes).*

## 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.

![Comparison of Joker with and without blend mode.](https://cdn-images-1.medium.com/max/2000/1*Hy-7ZUYELT98I4W6w1JIXg.png)

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.

{% gist https://gist.github.com/CoderJay06/ee9e39818a0a780188c14cc36c6258fa %}

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

![background-blend-mode: screen;](https://cdn-images-1.medium.com/max/2000/1*5MqDBxFw_FcjhoFgozVDdg.png) `background-blend-mode: screen;`

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

![background-blend-mode: multiply;](https://cdn-images-1.medium.com/max/2000/1*motyqhyldpveyAwb9Lo6nw.png) `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;](https://cdn-images-1.medium.com/max/2000/1*3gQy7P-46F10yB0zSVXySg.png) `background-blend-mode: color-dodge;`

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

![background-blend-mode: overlay;](https://cdn-images-1.medium.com/max/2000/1*BTL-qTBacx-GHah5_JUc0A.png) `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;](https://cdn-images-1.medium.com/max/2000/1*5l_4b9bYk96P2V1h-MQDbQ.png) `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;](https://cdn-images-1.medium.com/max/2000/1*kA5wc-ikiYKL0p-MlcWjkA.png) `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`](https://developer.mozilla.org/en-US/docs/Web/CSS/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)](https://www.w3schools.com/cssref/pr_background-blend-mode.asp)

* [background-blend-mode (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode)

* [The ultimate guide to CSS blend modes](https://highrise.digital/blog/css-blend-modes/)

* [CSS blending modes (Youtube)](https://www.youtube.com/watch?v=-c94pr41jaI)