With the release of version 30, Firefox becomes the latest browser to support CSS Blend Modes (Chrome has had them for a few months, and support is on the way in Safari 8). But what are blend modes? What is blending, for that matter?

If you’ve ever used image editing tools like Photoshop, Sketch or GIMP, you’ll probably already be familiar with blend modes. For everyone else, they are methods of mixing two visual layers so that the two are combined. This could be an image layer with a colour layer, or two image layers.

There are many different blend modes, which control how the mixing happens; for example, using the screen mode means the more black an image contains, the more background colour (or another image) shows through; and the opposite is true for multiply. That should become a little clearer when I show some practical examples.

Blending background layers

The background-blend-mode property blends the background layers of an element. To illustrate how this is done, let’s start with the common pattern of an element with two background layers: an image and a solid colour.

E { background: url('foo.jpg') #f00; }

If the image is large enough to cover the element, as is the case here, the background colour layer will be completely hidden. However, if we add a blend mode to the element…

E {
  background: url('foo.jpg') #f00;
  background-blend-mode: screen;
}

Now the background colour layer shows through. As we’re using the screen mode here, the background colour shows more strongly where the image is dark, and much less where the image is white.

You can also blend two background images if the element has them applied, like so:

E {
  background-color: transparent;
  background-image: url('foo.jpg'), url('bar.png');
  background-blend-mode: multiply;
}

The result is these ghostly cows.

Blending with other elements

It’s pretty useful to be able to blend an element’s background layers, but even more so to blend elements with each other. This is done with the mix-blend-mode property, currently only supported in Firefox Nightly and Chrome and Opera (behind the experimental web platform features flag). This property blends an element with everything that’s painted underneath it.

The syntax is identical to background-blend-mode. As an example of how to use it, take a look at this code where E has a background image applied, and its child element F has a blend mode of overlay:

E { background-image: url('foo.png'); }
F { mix-blend-mode: overlay; }

As mentioned, you’ll need Firefox Nightly, Chrome or Opera to see this example working.

The overlay blend mode works sort of like a combination of screen and multiply, preserving highlights and shadows so that the mid-tones are blended more.

Find out more

Shwetank Dixit wrote a very good explanation of the different blend modes on dev.opera.com, and Bennett Feely has done a great job of showing why you’d use them. For better demos, see Razvan Caliman’s CSS Blending Octoshirt.

Alternatively you could wait until September for the fully revised and extended second edition of my Book of CSS3, which contains more in-depth explanation. If you pre-order now you get 30% off.