With the release of ver­sion 30, Fire­fox becomes the lat­est brows­er to sup­port CSS Blend Modes (Chrome has had them for a few months, and sup­port is on the way in Safari 8). But what are blend modes? What is blend­ing, for that matter?

If you’ve ever used image edit­ing tools like Pho­to­shop, Sketch or GIMP, you’ll prob­a­bly already be famil­iar with blend modes. For every­one else, they are meth­ods of mix­ing two visu­al lay­ers so that the two are com­bined. This could be an image lay­er with a colour lay­er, or two image layers.

There are many dif­fer­ent blend modes, which con­trol how the mix­ing hap­pens; for exam­ple, using the screen mode means the more black an image con­tains, the more back­ground colour (or anoth­er image) shows through; and the oppo­site is true for mul­ti­ply. That should become a lit­tle clear­er when I show some prac­ti­cal examples.

Blending background layers

The background-blend-mode prop­er­ty blends the back­ground lay­ers of an ele­ment. To illus­trate how this is done, let’s start with the com­mon pat­tern of an ele­ment with two back­ground lay­ers: an image and a sol­id colour.

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

If the image is large enough to cov­er the ele­ment, as is the case here, the back­ground colour lay­er will be com­plete­ly hid­den. How­ev­er, if we add a blend mode to the element…

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

Now the back­ground colour lay­er shows through. As we’re using the screen mode here, the back­ground colour shows more strong­ly where the image is dark, and much less where the image is white.

You can also blend two back­ground images if the ele­ment 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 ghost­ly cows.

Blending with other elements

It’s pret­ty use­ful to be able to blend an element’s back­ground lay­ers, but even more so to blend ele­ments with each oth­er. This is done with the mix-blend-mode prop­er­ty, cur­rent­ly only sup­port­ed in Fire­fox Night­ly and Chrome and Opera (behind the exper­i­men­tal web plat­form fea­tures flag). This prop­er­ty blends an ele­ment with every­thing that’s paint­ed under­neath it.

The syn­tax is iden­ti­cal to background-blend-mode. As an exam­ple of how to use it, take a look at this code where E has a back­ground image applied, and its child ele­ment F has a blend mode of over­lay:

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

As men­tioned, you’ll need Fire­fox Night­ly, Chrome or Opera to see this exam­ple working.

The overlay blend mode works sort of like a com­bi­na­tion of screen and multiply, pre­serv­ing high­lights and shad­ows so that the mid-tones are blend­ed more.

Find out more

Shwe­tank Dix­it wrote a very good expla­na­tion of the dif­fer­ent blend modes on dev.opera.com, and Ben­nett Feely has done a great job of show­ing why you’d use them. For bet­ter demos, see Raz­van Caliman’s CSS Blend­ing Octoshirt.

Alter­na­tive­ly you could wait until Sep­tem­ber for the ful­ly revised and extend­ed sec­ond edi­tion of my Book of CSS3, which con­tains more in-depth expla­na­tion. If you pre-order now you get 30% off.