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.