Desaturating a color image with CSS is cool and you can create a multitude of effects from this technique.

Here is a bulletproof way to proceed.

img.desaturate {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: gray;
	filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><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>#greyscale");
}
Convert Images To Black And White With CSS

Original Image

Photo by: Aleks Dorohovich

 

Original Image with B&W CSS filter

Photo by: Aleks Dorohovich

Source: http://thenewcode.com/532/Convert-Images-To-Black-And-White-With-CSS

One more thing

It doesn’t work on IOS 9 (iPhone and more) … 🙁