Are there any filters that would make background image black and white?

I have an image set as the background image using CSS, but now I need to apply a filter so that an image is shown in black and white only. Ideally, I would also like to apply opacity to it.

The effect I really trying to achieve is to have background image black/white and on hover over that span element the filter would be removed, revealing the color version.

And of course it has to work in Firefox, Chrome and Internet Explorer.


7 Answers 7


This question is missing a more current answer.

The answer is yes, now this is possible and it is well supported amongst modern browsers (though ironically not IE10+ without JavaScript). You are looking at the filter CSS property (which does a lot of other cool stuff besides black and white).

A blog post here goes into more details:


As well as this question here on Stack Exchange which is getting some love and worth a follow by the OP:


And finally, an actual piece of code, shamelessly robbed from the Stack Exchange answer and tested in Chrome and IE9:

    filter: grayscale(100%); /* Current draft standard */
    -webkit-filter: grayscale(100%); /* New WebKit */
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); /* Not yet supported in Gecko, Opera or IE */ 
    filter: url(resources.svg#desaturate); /* Gecko */
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */

For CSS only, I don't think you could achieve the rollover effect with any type of a filter. You could have 2 versions of the image, one color and one b/w, combine them as one image with each version side by side, and offset the images when the mouse hovers over it, using the a CSS sprites technique...http://www.alistapart.com/articles/sprites

  • Interesting idea, thanks. So far the best I could do is to use opacity: 0.3; and then for span:hover {opacity 1.0} this gives a nice effect but just not black-white to color that I was looking for.
    – Dmitri
    Mar 15, 2011 at 14:33

An option is to use SVG filters: https://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css

IE has a built in filter you can use (see answers on link).


I don't think CSS was ever really intended for fancy graphical 'filters' though opacity seems to be a useful exception. Just swap the background image

span:hover {opacity: 1.0 ; background-image:url(someimage.png); } 
  • CSS is purposely designed to abstract the look and graphical impact of a website to one discrete place, it is absolutely the place for fancy graphical filters and the only place such things should happen
    – Toni Leigh
    Apr 25, 2014 at 19:54

Have a look at http://www.pixastic.com/lib/

  • I am looking for non-javascript, only css. Javascript solution would be the last resort.
    – Dmitri
    Mar 15, 2011 at 14:14


"This demo is intented to show you how to make a grayscale/color image hover effect with HTML5 and jQuery. To achieve this effect before HTML5, two images are required: a color and a grayscale version. Now HTML 5 made it easier and faster because the grayscale image is generated from the original source. I hope you will find this script useful in your design such as portfolio showcase, photo gallery, etc.

The jQuery code will look for the target images and generate a grayscale version. When hovering the image, it will fade the grayscale image into color."

This should help you out!


Have a look at this : http://sag-3.blogspot.com/2012/11/grayscale-using-css.html

This method is pure CSS and will work in all webkit based browsers.

So the code is:


<div id="background-image" style="background:url(image.png);"></div>


#background-image:hover{-webkit-filter: grayscale(100%);}
  • "has to work in FF, Chrome, IE"
    – Su'
    Feb 20, 2013 at 17:04
  • @Su' It will work in Chrome & Safari.
    – Subin
    Feb 21, 2013 at 4:39
  • 2
    So it still doesn't fulfill the requirements of the question, then.
    – Su'
    Feb 21, 2013 at 6:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.