Select Page
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
The CSS
1
2
3
.blackandwhite {
    filter: grayscale(100%);
}
The image HTML
1
<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:

1
2
3
4
.blackandwhite {
    filter: gray;
    filter: grayscale(100%);
}
Here’s our black and white image