Filters allow us to visually process an image in the browser without needing to go through PhotoShop or use cycle-intensive, script-heavy methods in JavaScript or PHP. CSS filters are broadly supported in modern browsers, and we can gain support in older versions and alternative browsers – even IE – by using a combination of techniques.

Add An SVG Filter Effect

The CSS shown to this point works in Chrome 18+, Safari 6 and higher on both mobile and desktop platforms, Firefox 35+, Opera 15+, and the latest browser versions for Android and Blackberry; IE support is in development.

To gain the same effect in earlier versions of Firefox, we need to use an SVG filter, which I’ll create as a separate document named desaturate.svg. The code for that file will be:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">

<filter id="greyscale">

<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0

0.3333 0.3333 0.3333 0 0

0.3333 0.3333 0.3333 0 0

0 0 0 1 0" />

</filter>

</svg>

If the SVG code looks slightly daunting – and the matrix math behind it is somewhat complex – don’t worry. This is one piece of code that I’d actually encourage you to copy and paste as a generic “recipe”. I’ll explain matrix transformations in a future article.

With the SVG file saved beside our HTML page and test image, we will extend the CSS to become:

The CSS we've written here allows us to visually convert an image to black and white on the fly in our browser, with no need to save new versions in PhotoShop. Using CSS also makes the image much easier to modify: for example, you’ll see that lowering the percentage used in our declaration from 100% to 50% causes a visual blend of the desaturation effect with the original color image.

Update

A slightly easier approach inlines the SVG into the CSS directly, removing the need for any SVG code in the <body>: