Pages

▼

24 June 2012

Cross-Browser Image Grayscale with CSS




Update: I've extended my blog post into a full GitHub project, with JavaScript polyfill that switches out <img> tags with the SVG goodness that IE 10 and 11 need: https://github.com/kununu-labs/gray


To apply a grayscale effect (color desaturation) to images across Firefox 10+, Firefox on Android, Internet Explorer 6 - 9, Chrome 19+ and Safari 6+ on desktop and iOS, use the following snippet below.

To disable the effect again, apply:

Check out a demo, which includes fading back to color on hover, Internet Explorer 10 support with inline SVG, and partial grayscale.

Note: If you're experiencing issues with blurry images in Firefox, you can try playing with the filterRes attribute, but this will tie your image resolution to the svg code.

94 comments:

  1. Unknown09 July, 2012 12:37

    Thanks, the svg into the css code helpme to work fine in FF!

    ReplyDelete
  2. Anonymous24 July, 2012 07:50

    doesn't work in chrome :(

    ReplyDelete
    Replies
    1. Karl Horky24 July, 2012 08:52

      Do you see the grayscale image in the fiddle? http://jsfiddle.net/KDtAX/8/ What operating system and version of Chrome do you have? It's worked on every Chrome 20 on Mac and Windows that I've tested.

      Delete
  3. Anonymous04 August, 2012 21:47

    Thank you.. This works in FF and other browser!.. :-)

    ReplyDelete
  4. Duermesano07 August, 2012 13:23

    Gracias, era lo que estaba buscando.

    ReplyDelete
  5. Timothy Jack08 August, 2012 08:38

    This is terrific and such a 'simple' solution! Thanks to you for your effort.

    ReplyDelete
  6. Muhammad Zaki Al Aziz09 August, 2012 08:37

    Beautiful :)

    ReplyDelete
  7. Anonymous11 August, 2012 09:52

    thank you very much! nice!!

    ReplyDelete
  8. poskobanjir15 August, 2012 17:26

    tenkyu!!!

    work on Firefox :D

    thanks
    thanks
    thanks

    ReplyDelete
  9. Unknown15 August, 2012 19:38

    I tried it on my tumblr blog but somehow it doesn't work with the photosets anyone know why?

    ReplyDelete
    Replies
    1. Karl Horky16 August, 2012 00:56

      Do you have an example URL?

      Delete
    2. Unknown18 August, 2012 05:42

      here : http:// my-biases.tumblr.com

      Thank you =)

      Delete
    3. Karl Horky18 August, 2012 17:17

      Seems like photosets in tumblr use iframes, which means that it's a bit more effort to style the images with CSS. Try something like this: https://groups.google.com/forum/?fromgroups#!topic/tumblr-themes/SR99h0yLqZg%5B1-25%5D

      Delete
  10. Anonymous19 August, 2012 20:42

    is there a code for images on your website that you don't want to be made monochrome?

    ReplyDelete
    Replies
    1. Karl Horky19 August, 2012 20:56

      Not entirely sure what you mean. If you don't want the effect, don't apply it. If you wanted to selectively apply it to some images and not others, you could use a class for the effect.

      Delete
    2. Anonymous19 August, 2012 21:01

      "If you wanted to selectively apply it to some images and not others.." <- that's exactly what i want. what is a class ;_;

      Delete
    3. Karl Horky19 August, 2012 21:06

      A class is a type of CSS selector: http://www.cssbasics.com/chapter_3_css_class.html

      Delete
    4. Anonymous19 August, 2012 21:21

      oh ok well what i want is to make it not work on 2 images. is there possibly a class for that? and thank you for putting up with my stupidity x.x~

      Delete
    5. Karl Horky19 August, 2012 21:34

      From the jsFiddle example at http://jsfiddle.net/jXV3r/2/ , there is a class called "color" that would work.

      Delete
    6. Anonymous19 August, 2012 21:49

      it doesn't D:

      Delete
    7. Karl Horky20 August, 2012 22:10

      Do you have an example URL?

      Delete
  11. Andrew Abogado28 August, 2012 16:54

    Exactly the solution I've been looking for. Appreciate for posting this tut. Thanks.

    ReplyDelete
  12. AudioVoyuer11 September, 2012 15:51

    Awesome stuff! Simple and Clean! Thanks for the solution!

    ReplyDelete
  13. Anonymous19 September, 2012 13:36

    I have a problem when I want my web page print. The gray pictures are not printed

    ReplyDelete
    Replies
    1. Karl Horky19 September, 2012 19:35

      The Firefox rule (filter: url("data:image...) seems to break printing in Firefox and Chrome. If you need printing you may want to try a JavaScript solution.

      Delete
  14. Unknown19 September, 2012 17:10

    Any idea how to make the smooth fading transition work in Firefox (15+). It looks o nice in Chrome and Safari

    ReplyDelete
    Replies
    1. Karl Horky19 September, 2012 19:45

      If you don't mind a bit of extra styling and adding the image as a background to your css, then you could try a ::before or ::after pseudoelement with opacity for the hover effect. The demo link above has something similar in the IE10 SVG section, although you'll need to make the pseudoelements yourself.

      Delete
  15. Unknown20 September, 2012 11:39

    Thanks Very Useful Code :)

    Works Very Well :)

    ReplyDelete
  16. AED opleiding23 September, 2012 13:59

    Thanks a lot! was looking for this solution for a long time. I used to create image sprites to get this effect, but this is far more flexible!

    ReplyDelete
  17. Anonymous02 October, 2012 12:39

    I luv ya!
    Thanks so much mate

    ReplyDelete
  18. Anonymous02 October, 2012 21:51

    This is soooo greeaat!!
    thanks a lot!

    ReplyDelete
  19. Anonymous08 October, 2012 23:54

    Hi! Thats what im lookong for! But..
    Im a total noob if it comes to coding. Im trying to make a site in Dw, and i wold like to add this color on hover to the ClearBox gallery thumbnails in css. But no idea where exactly should i paste the code..
    There are some effects fot thumbnails lika a alpha:opacity but I dont know how to add the efect You created to this rule.
    my code:
    http://freetexthost.com/h04bz2scwi

    ReplyDelete
    Replies
    1. Karl Horky26 October, 2012 11:47

      You would want to add the img.grayscale rules to your .item a img (within the curly braces, directly under opacity: 1). The img.grayscale.disabled rules should be added to your .item a:hover img, .item a:active img block at the bottom as well.

      Take a look at the link below to get an idea of the basics of how CSS is written.
      http://www.cssbasics.com/css-syntax/

      Delete
  20. Anonymous26 October, 2012 03:59

    where I have to put the code?

    ReplyDelete
  21. zkiwi26 October, 2012 12:42

    Thanks for sharing! It work well! Nice solution!

    ReplyDelete
  22. Anonymous27 October, 2012 02:07

    #win dude! great snippet

    ReplyDelete
  23. Anonymous31 October, 2012 15:52

    Hey Karl, I've got a question. Can I apply different levels of greyscale (say, 50%)? It's simple with webkit but I don't know how with the others.

    ReplyDelete
  24. Anonymous05 November, 2012 15:01

    Love it, thank you from belgium !

    ReplyDelete
  25. Junki08 November, 2012 11:09

    Hey thanks a lot I've used it here: www.igconstruction.pl

    ReplyDelete
  26. Gruber11 November, 2012 20:00

    Pretty good indeed!
    Does this work on iOS Safari though? i've tried it on iphone 4, iOS 5.1.1 but it ain't working.
    Thank you anyway! :)

    ReplyDelete
    Replies
    1. Karl Horky11 November, 2012 20:04

      It works on iOS 6+.

      Delete
    2. Gruber11 November, 2012 20:11

      little update, i checked caniuse.com and found this, http://caniuse.com/#search=filter, >iOS6 has partial support for filters, still i cant find info on how to implement this

      Delete
    3. Gruber11 November, 2012 20:15

      ups didn't see your reply, yea full support only for ios6+, still caniuse tells there is partial support svg effects for html, how can those be implemented? thank you for your answer!

      Delete
    4. Karl Horky11 November, 2012 22:01

      My demo above uses SVG for the IE10 version, although this may fall under SVG Filters instead. Does the IE10 part of the demo work for you? I don't have an iOS device at the moment to test on.

      Delete
    5. Gruber12 November, 2012 00:05

      I've checked your demo on jsfiddle on my iphone and it doesn't work atm, all images are with colors.

      Delete
    6. Karl Horky12 November, 2012 00:41

      Hm, yeah then I'm not sure that a CSS grayscale is possible or desirable under iOS < 6. The CanIUse notes of the SVG effects for HTML indicates that it will be replaced by CSS filters.

      If you need support for older versions of iOS then JavaScript or a server-side grayscale look like your best options.

      Delete
    7. Gruber12 November, 2012 03:35

      mmm i see i guess i'll try with js then, thanks for help cheers!

      Delete
  27. Unknown18 November, 2012 00:42

    HI
    I just tested this code (which works in general good for me) with Windows 8 and IE10. In my case the gray scale suddenly does not apply to the images. On all other browsers incl . IE9 it works great.

    Any idea with regards to IE10?

    Thanks
    Kai

    ReplyDelete
    Replies
    1. Karl Horky19 November, 2012 20:05

      IE10 doesn't support CSS filters yet. If you take a look at the second example in the demo, you'll see an SVG method you can use for IE10, but I'm not sure if I would recommend it. It's a lot of code for a simple effect.

      If you want IE10 support, you're probably best off going with a JavaScript or server-side solution instead.

      Delete
  28. Anonymous19 November, 2012 11:16

    Thanks for Your Tip, The demo works like magic. But My problem is that I am using Wordpress and Its hard for me to achieve this. Any Help that will point me in the right direction, will be deeply appreciated. Thank You.

    ReplyDelete
  29. Unknown20 November, 2012 16:49

    I need to learn to thank people from the first time i'm borrowing the code, not like the fifth :-) Thank you brother!

    ReplyDelete
  30. Pablo29 November, 2012 19:37

    Thanks man, elegant solution

    ReplyDelete
  31. Anonymous30 November, 2012 10:44

    You are the master of magic. You saved my day. Thank you sooooo much!!!

    ReplyDelete
  32. Nighto05 December, 2012 18:59

    Thanks! Kudos from Brazil =)

    ReplyDelete
  33. Anonymous10 December, 2012 18:30

    Great! It works in Chrome, FF and IE.

    Thanks. Gracias.

    ReplyDelete
  34. Anonymous11 December, 2012 21:06

    Can someone confirm why is image moving in Firefox 17.0.1 (Windows 8) on hover and its a little blurry.

    ReplyDelete
    Replies
    1. Karl Horky11 December, 2012 21:40

      Those are side effects of the svg filter being applied to the image. I updated my post - the issue with the image moving is fixed in the latest demo above.

      Delete
    2. Anonymous13 December, 2012 18:16

      I tried your demo with 17.0.1 (Win 7) but the problem is still here.

      A strange issue is that I experience the problem only in some browser resolutions. E.g. in fullscreen the problem appears, when I resize the page in some resolutions the images are displayed correctly.

      Delete
    3. Karl Horky21 December, 2012 20:06

      Can you make a video of the effect so that I can be sure that I'm seeing the same thing that you're describing?

      Delete
    4. Karl Horky09 February, 2013 20:43

      I think I have reproduced and fixed the issue with the blurriness now. Take a look at my comment below.

      Delete
  35. Juggernauttope19 December, 2012 18:18

    It worked thanks!

    ReplyDelete
  36. Anonymous20 December, 2012 00:17

    hello
    I have the issue too, the image becomes blurry in firefox for gray and in color, any fix for that?

    ReplyDelete
  37. Unknown21 December, 2012 18:17

    Class MUST me applied to the IMAGE, don't apply to anchor or container tag

    ReplyDelete
  38. Anonymous23 December, 2012 11:25

    same here,
    image is blurry for me too , can you please provide fix for that?

    ReplyDelete
  39. Anonymous28 December, 2012 10:46

    works just fine for me

    ReplyDelete
  40. James Hilton30 December, 2012 06:54

    haha I just grabbed this css code, and hours later, I came back to the open tab and realized I was looking at a giant school bus doing a wheely

    ReplyDelete
  41. Anonymous07 January, 2013 05:21

    Hi, its awesome its working fitefox but for me its not working on chrome!..

    ReplyDelete
    Replies
    1. Karl Horky12 January, 2013 00:46

      Which version of Chrome does it not work for you on? It's working in the latest dev versions (v25) for Windows and Mac for me.

      Delete
  42. Karl Horky18 January, 2013 00:25

    What issue are you having? Can you post a screenshot and what you've tried so far?

    ReplyDelete
  43. Anonymous18 January, 2013 06:51

    It's not working for me on Opera or Safari!

    ReplyDelete
    Replies
    1. Karl Horky01 March, 2013 21:54

      Safari only works in version 6+. Current versions of Opera do not work, but since Opera is switching to WebKit, this shouldn't be a problem for much longer.

      Delete
  44. Anonymous18 January, 2013 19:08

    Awesome dude! working on mac osx 10.8.2 Firefox 19.0.
    Thank you very much!

    ReplyDelete
  45. Unknown28 January, 2013 03:23

    Is there a way to do this universally with sepia, exposure or blur?

    ReplyDelete
  46. Anonymous31 January, 2013 14:59

    Great job :)

    ReplyDelete
  47. Anonymous08 February, 2013 16:32

    Thanks!
    Embeding svg in css works for me in FF!

    ReplyDelete
  48. Anonymous09 February, 2013 08:09

    Image becomes blurry for me when grayscaled in Firefox. And as a guy mentioned earlier, if i resize my browser a bit smaller then suddenly the image becomes clear. Very strange

    Anyone knows of a solution?

    ReplyDelete
    Replies
    1. Karl Horky09 February, 2013 20:38

      Finally was able to reproduce the bug today and found the solution. It appears the filterRes attribute needs to be set to approximately twice the resolution of the image.

      Made a fiddle here: http://jsfiddle.net/KDtAX/787/

      A couple caveats: I'm not sure this is a recommended solution for everyone because it adds complexity and image dimension dependence to the CSS. Also, I haven't had a chance to test this yet on Firefox on Mac.

      Delete
    2. Karl Horky01 March, 2013 21:51

      I tested this to be working on Firefox Mac. So the only issue I can see is that it makes your SVG code dependent on the size of your images.

      Delete
  49. Josejulio Martínez22 February, 2013 20:00

    If you run that CSS using Yui compressor (twitter-recess seems to use it aswell) you get a wrong filter value for the firefox filter, it seems that it removes the white-spaces IE "<svg xmlns=" gets minified to "<svgxmlns=", any idea how to fix that?

    ReplyDelete
    Replies
    1. Karl Horky01 March, 2013 00:09

      This looks like a bug in YUI Compressor.

      The YUI Team has decided to deprecate YUI Compressor in favour of the new yuglify project.

      Delete
    2. Karl Horky01 March, 2013 01:01

      Your best options would be to either look for a new css minifier for the project or switch to a version of YUI Compressor that doesn't have this problem (this issue would affect other code with data uris too, not just my code).

      If you don't want to switch your minifier, you can create a separate svg file and then use the path to this file as the url instead. Be aware that this creates a slight performance hit. Solution here.

      Delete
  50. AyahGio25 February, 2013 05:58

    Thanks,
    it's works fine for me

    ReplyDelete
  51. Unknown04 March, 2013 18:52

    Any idea how to get this working for a specific image in Wordpress? Thanks.

    ReplyDelete
  52. Anonymous20 March, 2013 16:35

    Hi, this is great. It doesn't seem to work on my Samsung Galaxy 3 browser. Any idea why?

    ReplyDelete
  53. Anonymous22 March, 2013 22:54

    Does not work on Firefox 19.0.

    ReplyDelete
  54. Unknown08 April, 2013 15:31

    This comment has been removed by the author.

    ReplyDelete
  55. nick08 April, 2013 16:05

    This is awesome. i used this code many times. thanks :)

    ReplyDelete
  56. Kang Rian10 April, 2013 18:25

    #awesome tutorial!

    ReplyDelete
  57. Lee17 April, 2013 19:32

    Works great, thank you, but is there a way to stop image quality degradation?

    ReplyDelete