CSS Blending — a Five-minute Introduction

Warning This article was written over six months ago, and may contain outdated information.

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; }

OK

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.

7 comments on
“CSS Blending — a Five-minute Introduction”

  1. Note that mix-blend-mode is still behind flag in Chrome.

  2. Oops! Thanks, have updat­ed the post to note that.

  3. Wow that is fan­tas­tic, it’s so easy to imag­ine so many appli­ca­tions for this.

  4. A bit off-top­ic: background: url(…) #color nota­tion in the begin­ning is a bit con­fus­ing to me (though absolute­ly valid). When I see col­or at the end of back­ground I’m start­ing to look for com­ma in the val­ue (is it mul­ti­ple back­gounds, eh?) Prob­a­bly because background:#color is a spe­cial case I used to put col­or first (just like in every CSS I’ve ever seen). Is there any rea­son for you to state it last in short­hand? Just curious.

  5. To be hon­est, I’ve always done it that way with­out real­ly ques­tion­ing why. Just seems to make sense to define the back­ground image first and col­or last, as the image will be dis­played before the color.

  6. Thank you for this arti­cle. I was read­ing this arti­cle in Safari first and could­n’t see the blend modes at work, which was pret­ty amus­ing when you were point­ing out the dif­fer­ences between images. But it made for an inter­est­ing con­trast when I switched over to Fire­fox. The blend modes look great and pos­si­bil­i­ties offered with CSS blend­ing is exciting.

  7. Excel­lent, new to me, thanks.