Convert colored images to Grayscale with Pure CSS
Ever tried turning an image into grayscale in CSS? Can it be doable? Yes. With the help of filters.
CSS3 Filters allow you to desaturate an image in the browser. Before these magical filters, there were three popular ways to convert images into Black & White:
- PHP GD library filters, on the web (server-side)
- Image editing program like PhotoShop, off the web
Note that the second and the third ways involves the actual conversion of the images. Its okay with the image editing software on your computer, but can be pretty expensive on the server-side.
Using CSS3 filters to make images grayscale is very easy and also avoids using any script libraries.