Creating Black and White Images With CSS Filters

Making color images black and white with CSS3 is our discussion this time.

In the past we had to use Photoshop to give a photo grayscale (black and white) effect to an image, but now with the sophistication of css3 features we don’t need to be tired of editing it in Photoshop, just with a few lines of css code we can make color photos black and white.

Grayscale NoCar
Image by : comzeraddt

A few months ago also discussed in the article Creating Instagram Effects with CSS3 filters, but until now it doesn’t support Firefox, but this time we will try to make a grayscale effect that can be run in Firefox.

Okay, let’s just practice making.

Prepare a file with the name grayscale.html with the following structure

For the css code like this