Is there any way to grayscale image using css and html only crossbrowser

0 votes
asked Mar 11 by anonymous

I just want to use css and html, no javascript or any other server/client side code to make an image grayscale. Is there any cross browser solution?

1 Answer

0 votes
answered Mar 11 by anonymous

I will not recommend you to use just css and html to gray scale an image for cross browser support, the only way to be 100% sure that your grayscale image will be gray scale on all browser including there previous and upcoming versions is to use some kind of server side code.

But if you don't have any other option but to use only html and css. then this is the way, will work on all major browsers.

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;