Chaining Multiple Blend Modes

The background-blend-mode CSS property is nifty in lots of ways. It gives developers the ability to blend one background-image with its own background-color, or even with another background-image that’s been applied to that very same element.

What’s extra interesting is that you can chain these blend modes together. If you add multiple background images to an element you can also declare which background should use which specific blend-mode.

But first, it’s worth reiterating what we currently know about the background-blend-mode property before we start chaining values together. Let’s remind ourselves of the basics.

Blending background-images and background-colors together

To blend a background-image with a background-color we apply all three properties to a single element:

.container {
  background-color: red;
  background-image: url(...);
  background-blend-mode: multiply;
}

There are a lot more values than simply multiply. So while I was testing each of them, I decided to make a simple menu to select each one of them in turn. With the help of a small amount of JavaScript we can switch out one value of this property for the other.

In the demo below make sure to select a different color with the same blend-mode to see what happens:

See the Pen Background blend mode by CSS-Tricks (@css-tricks) on CodePen.

Up until now this is probably how you’ve seen background-blend-mode being used in previous demos, as overlaying one image over a background-color is really quite pretty. But there’s a lot more we can do with this property.

Blending multiple background-images

To blend two or more images together we need to add them to a comma-separated list, like so:

.container {
  background-image: url(...), url(...);
  background-blend-mode: multiply;
}

See the Pen Background-blend-mode with multiple images by Robin Rendle (@robinrendle) on CodePen.

In this demo the first item in the background-image list is our base and we’re declaring how the second image should be imprinted on top of it. But we don’t need to position two separate images on top of the other, as there are plenty of beautiful effects that we can create by imposing the same background-image on itself and blending the result together:

.container {
  background: url(...), url(...);
  background-position: 0 0, 0 -10px;
  background-blend-mode: screen;
}

See the Pen Background-blend-mode with a single image by CSS-Tricks (@css-tricks) on CodePen.

Up until very recently I wasn’t aware that you could comma-separate background-position elements like this. The first two zeroes will position the first image and the second pair will position the second image. This got me thinking about whether we could do the same thing with blend modes and it turns out that (spoiler!) we totally can.

Blending multiple images with multiple blend modes

We want to control how each layer is affected by a specific blend mode, because by default, each image will simply inherit the currently set mode. In the code below we want the two background images to be multiplied then we want the last background image screened with the linear-gradient. It works!

.container {
  background: url(...), url(...), linear-gradient(#999, red);
  background-position: 0 0, 0 10px, 0 0;
  background-blend-mode: multiply, screen;
}

In this demo I’ve added two background images and three linear gradients with four blend modes:

See the Pen Background-blend-mode with multiple images and gradients by Robin Rendle (@robinrendle) on CodePen.

I’ve also added an animation to the background-position of the birds image to illustrate that these really are separate layers. In practice I wouldn’t recommend animating the background-position property alone like this though because of performance concerns.

I’m sure there’s a lot more interesting things that can be done with this technique of chaining multiple background images, gradients and blend-modes together. In the meantime be sure to checkout the Almanac entry for background-blend-mode to see any updates and any more weird tricks that we’ve found.