Black And White

Is there a simple way to display a color bitmap in grayscale with just HTML/CSS? It doesnt need to be IE-compatible (and I imagine it wont be) -- if it works in FF3 and/or Sf3, thats good enough for me.

I know I can do it with both SVG and Canvas, but that seems like a lot of work right now. Is there a truly lazy persons way to do this?

Support for CSS filters has landed in Webkit. So we now have a cross-browser solution.

In your CSS you reference the filter using the Firefox specific filter property:

edit: Heres a nice blog post which describes using the new CSS3 filter property in SalmanPKs answer in concert with the SVG approach described here. Using that approach youd end up with something like:

For Firefox you dont need to create a filter.svg file, you can use data URI scheme.

This method should be faster than the other because the browser will not need to do a second HTTP request.

If you are able to use JavaScript, then this script may be what you are looking for. It works cross browser and is working fine for me so far. You cant use it with images loaded from a different domain.

Doesnt look like its possible (yet), even with CSS3 or proprietary -webkit- or -moz- CSS properties.

However, I did find this post from last June that used SVG filters on HTML. Not available in any current browser (the demo hinted at a custom WebKit build), but very impressive as a proof of concept.

in webkit and firefox there is currently no way to desatuarte an image solely with CSS. so you will need to use either canvas or SVG for a client side solution.

but i think using SVG is more elegant. check out my blog post for the SVG solution that works for both firefox and webkit: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

and strictly speaking since SVG is html the solution is pure html+css :-)

Just got the same problem today. Ive initially used SalmanPK solution but found out that effect differs between FF and other browsers. Thats because conversion matrix works on lightness only not luminosity like filters in Chrome/IE . To my surprise Ive found out that alternative and simpler solution in SVG also works in FF4+ and produces better results:

I have since been keeping the solution updated on this blog post, adding support for fading back to color, IE10 support with SVG, and partial grayscale in the demo.

I was playing around with PHP and remembered this question (god knows why)!

I think this might be exactly what you want, I got it from the PHP GD library and added some variable to automate the process...

So I googled "canvas grayscale", and the first result was http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html which seems to work.

Its in fact easier to do it with IE if I remember correctly using a proprietary CSS property. Try this FILTER: Gray from http://www.ssi-developer.net/css/visual-filters.shtml

The method by Ax simply makes the image transparent and has a black background behind it. Im sure you could argue this is grayscale.

Although you didnt want to use Javascript, I think youll have to use it. You could also use a server side language to do it.

support for native CSS filters in webkit has been added from the current version 19.0.1084.46

so -webkit-filter: grayscale(1) will work and which is easier than SVG approach for webkit...

For people who are asking about the ignored IE10+ support in other answers, checkout this piece of CSS:

One terrible but workable solution: render the image using a Flash object, which then gives you all the transformations possible in Flash.

If your users are using bleeding-edge browsers and if Firefox 3.5 and Safari 4 support it (I dont know that either do/will), you could adjust the CSS color-profile attribute of the image, setting it to a grayscale ICC profile URL. But thats a lot of ifs!

This question is protected to prevent "thanks!", "me too!", or spam answers by new users. To answer it, you must have earned at least 10 reputation on this site.