Convert colored images to Grayscale with Pure CSS

Quick ways to turn colorful image to grayscale mode in CSS without using even a bit of JavaScript.

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:

  •     JavaScript Image processing libraries like Pixastic
  •     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.

But why actually convert images to grayscale for web use? Better use JavaScript to visually-process images in the browser? Better use CSS filters.

Using CSS3 filters to make images grayscale is very easy and also avoids using any script libraries.

Demo | Read the full tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *