• support@answerspoint.com

Convert an image to grayscale in HTML/CSS


Is there a simple way to display a color bitmap in grayscale with just HTML/CSS?

It doesn't need to be IE-compatible (and I imagine it won't be) -- if it works in FF3 and/or Sf3, that's 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 person's way to do this?



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


img {
  filter: gray; /* IE6-9 */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */

/* Disable grayscale on hover */
img:hover {
  filter: none;
  -webkit-filter: grayscale(0);
<img src="http://lorempixel.com/630/170/">
  • answered 7 years ago
  • Gul Hafiz

Your Answer

    Facebook Share        
  • asked 7 years ago
  • viewed 1730 times
  • active 7 years ago

Best Rated Questions