How to Make Images into Black and White Using CSS? | Code Snippet

Make Images into Black and White Using CSSCode Snippet #3: The code we explored today is to for CSS lovers which turns images into black and white using pure CSS. This code has the ability to make images into black and white using CSS. No need of Photoshop anymore to turn images into black and white.

It is always nice to turn your colorful images into black and white in your web design work. Adding such a grey-scale effect on images is useful for gallery and hover effects designs.

This is our first code snippet in the CSS category. In our previous code snippet we saw how to fetch multiple checkbox values using JS. Check out the demo below:


The code we have shown here is just for one image block.



The CSS code shown below is the one which does the magic of converting a normal colorful image into black and white:

The image can be either added directly using <img> tag or using CSS to apply the grayscale filter on them. The “img” tag can be used as shown below:

and the CSS:


For better Firefox and IE support, add an SVG filter in the CSS:

Hope I was able to explain everything to the point. You can use other options along with grayscale filter on the images like hover effects and gallery stuffs without the need to use Photoshop or any other image editing software.


Vinod Suthersan is a enthusiastic web designer still learning new things on web designing. He loves designing, hunting new designs, blogging, and crazy about Internet. Know more

You may also like...