CSS Blending — a Five-minute Introduction

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

OK

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.

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 updated the post to note that.

  3. Wow that is fantastic, it’s so easy to imagine so many applications for this.

  4. A bit off-topic: background: url(…) #color notation in the beginning is a bit confusing to me (though absolutely valid). When I see color at the end of background I’m starting to look for comma in the value (is it multiple backgounds, eh?) Probably because background:#color is a special case I used to put color first (just like in every CSS I’ve ever seen). Is there any reason for you to state it last in shorthand? Just curious.

  5. To be honest, I’ve always done it that way without really questioning why. Just seems to make sense to define the background image first and color last, as the image will be displayed before the color.

  6. Thank you for this article. I was reading this article in Safari first and couldn’t see the blend modes at work, which was pretty amusing when you were pointing out the differences between images. But it made for an interesting contrast when I switched over to Firefox. The blend modes look great and possibilities offered with CSS blending is exciting.

  7. Excellent, new to me, thanks.

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>