Display Images as Grayscale with CSS Filters

By  on  

CSS filters aren't yet widely supported but they are indeed impressive and a modern need for web imagery.  CSS filters allow you to modify the display of images in a variety of ways, one of those ways being displaying images as grayscale.

Doing so requires the most minimal of CSS:

img.bw {
	filter: grayscale(1);
}

You can even animate an image to or from grayscale:

img.bw {
	filter: grayscale(0);
}

img.bw.grey {
	filter: grayscale(1);
	transition-property: filter;
	transition-duration: 1s;	
}

CSS filters allow much more than just grayscale adjustments, so if you haven't taken the time, please play around with my CSS filter sandbox.  Remember that if the user chooses to download the image, it is downloaded in its original colored displays, but for online display purposes, CSS filters do the trick!

Recent Features

  • By
    Chris Coyier’s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

  • By
    Welcome to My New Office

    My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...

Incredible Demos

  • By
    JavaScript Canvas Image Conversion

    At last week's Mozilla WebDev Offsite, we all spent half of the last day hacking on our future Mozilla Marketplace app. One mobile app that recently got a lot of attention was Instagram, which sold to Facebook for the bat shit crazy price of one...

  • By
    iPhone Checkboxes Using MooTools

    One of the sweet user interface enhancements provided by Apple's iPhone is their checkbox-slider functionality. Thomas Reynolds recently released a jQuery plugin that allows you to make your checkboxes look like iPhone sliders. Here's how to implement that functionality using the beloved...

Discussion

  1. MaxArt

    I knew about CSS filters, but what always restrained me to use them is that they’re limited to Webkit/Blink browsers. Firefox supports just the url syntax.
    Many designers love them and for a reason. I just wish they were more widely supported.

  2. I cant find the difference between the 3 images. All images seems to be the same color! Is this a browser problem (firefox) or i don’t see it?

    • Yes, it doesn’t display the CSS filters effect in Firefox and also Opera… Hopefully it will be cross-browser in the future.

  3. I haven’t used css filters so far and this article fits perfectly for a design I want to implement.
    Thanks so much, great stuff

  4. Brian Douglas

    Is there a Firefox workaround for this?

  5. Grayscale is even better appreciated when used in action. It works perfectly on latest version of Chrome and firefox as seen on http://www.myweeblytricks.com/2014/09/weebly-tricks-72-grayscale-image.html

  6. David

    Unfortunately it does not work in IE11.

  7. LOC

    Check this, it worked for me perfectly: https://chrome.google.com/webstore/detail/grayscale-black-white-col/cjimlckjgclgboeebpjlipmokolejppk?hl=en (Chrome only) Using this app I can convert any web page to black & white color scheme.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!