Category : Css | Author : Chtiwi Malek | First posted : 4/18/2013 | Updated : 9/26/2017
Tags : css, color, grayscale, image, picture, design, monochrome, effect
Convert Color Images to Black and White with CSS

Convert Color Images to Black and White with CSS

In this tutorial we will write a Css class that will convert a colored image to black and white, the grayscale image will be generated on the client side by the browser's Css engine instead of using javascript or an image editor to upload two versions of the same picture.

There are plenty of different ways to convert images to black and white, but using Css is the most appropriate approach because layout, colors, textures, shadows.. are all the area of Css.

In addition to that, the Css grayscale function can be combined with animations, transitions, hover..  to achieve complex effects like fading, rollover, … and Css is getting better and better at this.

HTML markup :

<img src="my_picture.jpg" class="grayscale" />
The image can be declared in the html markup (as above) or in a Css class.

CSS markup :

To make our images into black and white in a cross browser way we will use three filter values : the standard Css filter for Webkit browsers, Svg filter for Firefox and Microsoft filter property for IE 6+ :
img.grayscale {

  /* for Webkit browsere, Chrome 19+, Safari 6+ ... */
  -webkit-filter: grayscale(1);

  /* this is for Firefox 3.5+, Firefox mobile */
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'gs\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#gs");

  /* for IE6+ */
  filter: gray;
}
Here's the result :
 
The first image is the original, the second is the grayscaled version and the third picture will be recolored to black and white on mouse hover.

The standard Css3 filter property is now only supported by Webkit browsers via their vendor prefix, but we can add the following lines to future-proof our code, when other browsers will implement this new feature either via their vendor prefixes or directly :
  -moz-filter: grayscale(1);
  -ms-filter: grayscale(1);
  -o-filter: grayscale(1);
  filter: grayscale(1);
This Css grayscale code doesn't work on Opera for now (april 2013), but I think Opera will implement Css3 filters and will soon support this.
About the author :
Malek Chtiwi is the man behind Codicode.com
34 years old full stack developer.
Loves technology; but also likes design, photography and composing music.
Comments & Opinions :
Thanks
thanks buddy, i am amazed how easily we can convert colored image into black n white by just adding one css property :)
- by Akhil Gupta on 5/14/2013
Nanda
thank dear, i am amazed how easily we can convert colored image into black n white by just adding one css property. thanks thanks thanks lot's of thanks
- by Debendra8093334338 on 9/19/2013
print trouble
Very nice, thank you very much, but when I try to print the page from firefox (print to .pdf), the image disappear...
I don't know why, can you help?
- by pilniczek on 9/28/2013
Thanks
Thanks a lot :)
- by R.s on 3/7/2014
Thanks for sharing this owsome css :)
This is very nice and easy to use
this was i am looking for :) :)
Thanks man.
- by Zeeshan on 7/17/2014
But dude not working in safari
Dude now it will be owsome when it will support in safari browser,
ok leave IE's but safari is modern need to run there, can u help ??
Thanks in Advance.....
 
- by Zeeshan on 7/17/2014
Can you do this with different colours?
For instance, could you specify a colour in Hexa and use that as a tinting colour for an image? How would it be done? Thanks in advance.
- by Natalie on 9/18/2014
Blogger
Hi, where do I input the CSS  or HTML element on blogger?
- by Berenice on 11/10/2014
Blogger
Hi, where do I input the CSS  or HTML element on blogger?
- by Berenice on 11/10/2014
I only want certain img in gray - not the whole website...
do you have any solution for that? And I can't seem to get the HTML code working...
- by Mikala on 11/27/2014
Thank u so much fri..
your idea super i need more tricks from u..
- by venkatesh on 12/17/2014
A nice example
A good example with an easy approach.

Here is another sibling for the same:
http://www.namasteui.com/convert-image-to-grayscale-in-css/

--
Regards,
Sourav Basak [Blogger, Entrepreneur, Thinker]
http://www.namasteui.com
- by Sourav Basak on 1/30/2016
Nice
Try this link also:

http://www.sanwebcorner.com/2015/02/change-color-photo-to-black-photo-using.html
- by san on 12/28/2016
Leave a Comment:
Name :
Email : * will not be shown
Title :
Comment :


» Member access