Convert an image to grayscale in HTML/CSS

Question

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?

Answer 1

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

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

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Wikimedia_Canadian_Community_Logo.svg/240px-Wikimedia_Canadian_Community_Logo.svg.png">

---

What about Internet Explorer 10?

You can use a polyfill like gray.

Answer 2

Following on from brillout.com's answer, and also Roman Nurik's answer, and relaxing somewhat the the 'no SVG' requirement, you can desaturate images in Firefox using only a single SVG file and some CSS.

Your SVG file will look like this:

<?xml version="1.0" encoding="UTF-8"?> <svg version="1.1"      baseProfile="full"      xmlns="http://www.w3.org/2000/svg">     <filter id="desaturate">         <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> 

Save that as resources.svg, it can be reused from now on for any image you want to change to greyscale.

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

.target {     filter: url(resources.svg#desaturate); } 

Add the MS proprietary ones too if you feel like it, apply that class to any image you want to convert to greyscale (works in Firefox >3.5, IE8).

edit: Here's a nice blog post which describes using the new CSS3 filter property in SalmanPK's answer in concert with the SVG approach described here. Using that approach you'd end up with something like:

img.desaturate{     filter: gray; /* IE */     -webkit-filter: grayscale(1); /* Old WebKit */     -webkit-filter: grayscale(100%); /* New WebKit */     filter: url(resources.svg#desaturate); /* older Firefox */     filter: grayscale(100%); /* Current draft standard */ } 

Further browser support info here.