CSS3 has some really great, convenient features. One that you may or may not know about is you can convert an image to black and white using only CSS. This is great when you don’t want/need to edit the original image.

Here’s how to do it


.blackandwhite {
	filter: grayscale(100%);

The image HTML

<img src="image.jpg" alt="Black and White" class="blackandwhite">

This will work in all modern browsers. But to be compatible with Internet Explorer versions 6-9, you will need to add the following:

.blackandwhite {
	filter: gray;
	filter: grayscale(100%);

Here’s our black and white image

Notice that when you hover over it, we set it to go back to full colour.

Free Graphics, Icons, Tutorials
Free Graphics Free Christmas Vector Icon Graphics Pack 2017Free Fitness Vector Icons Graphics PackFree Camping Vector Graphics PackFree Summer Graphics PackFree File Icon PackFree Fast Food Vector Graphics
Sharing is caring...
Like & Follow
Share the love, share this page! Facebook Twitter Digg Reddit LinkedIn Pinterest Email
Close [X]
The Web Taylor
1000 Lakeside North Harbour Portsmouth, Hampshire PO6 3EN
02392 123358