“Is there a simple way to display a color bitmap in gray-scale with just HTML/CSS?” – This was a question for most of web designer / developer. Meanwhile for achieving this effect, they were using JavaScript Library like grayscale.js or two different images.  After the end of Flash for website development, Adobe and others have been hard at work bringing this amazing technology to CSS.

CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. With advancements in the standards of Cascaded Style Sheets (CSS), doing a number of things in web design and development is becoming increasingly easier and fun. The latest specification (CSS3) has brought lots of new features, among the best is CSS filters. Filters allow you to modify the display of images in a variety of ways, some of those ways of displaying images as black and white, grayscale, sepia, invert, saturate, hue-rotate, blur and more. Though, this feature is not yet widely supported, but they are indeed impressive and a modern need for web imagery.

Convert Color images to Grayscale, Sepia, Blur & more with CSS Filter


With the grayscale property, we can archive a black and white image by setting its value to 100% or 1. The grayscale filter is supported in most of the modern browsers, specifically in Chrome 18+, Safari 6+, Opera 17+ with different vendor prefixes. But we can still provide fallback for older browsers. Our final code will look like this:

.grayscaleElement {
	-webkit-filter: grayscale(1); /* Older webkit versions */
	-webkit-filter: grayscale(100%);
	-moz-filter : grayscale (100%); /* Gecko-Based Browsers, Mozilla Firefox */
	-ms-filter : grayscale(100%);
	-o-filter : grayscale(100%); /* Opera */
	filter: grayscale(100%);
	filter: gray; /* IE 6-9 */
	/* This is for Firefox 3.5+, Firefox mobile */
	filter : url ("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'gs\'><feColorMatrixtype=\'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>#gs");

Note: No CSS fallbacks is available for IE10+ yet, therefore you have to use a different solution like grayscale.js or similar.


Sepia is a reddish-brown color, named after the rich brown pigment derived from the ink sac of the common cuttlefish Sepia. We can archive this tone on any web image with sepia CSS filter and its value is expressed in percentage ranging from 0-100.

.sepiaElement {
       -webkit-filter: sepia(100%);


The blur property uses a unit of pixels and can be any whole number. The following CSS snippet will blur an element:

.blurElement {
	-webkit-filter: blur(2px);


The Invert command inverts all the pixel colors and brightness values in the current layer, as if the image were converted into negative. Dark areas become bright and bright areas become dark. Hues are replaced by their complementary colors.

Note: This command only works on layers of RGB and Grayscale images. If the current image is Indexed, the menu entry is insensitive and grayed out.

.invertElement {
	-webkit-filter: invert(100%);

view demo


The saturate filter is used to vary the intensity of color in an image. A saturated element has overly bright colors. You can increase saturation of under-exposed images, or vice versa.

A change in saturation normally has a more noticeable effect on vibrant colors, less on dull colors or colors that are almost neutral and no change on black and white images.
The amount of saturation can be expressed in percentage, where a value of 0% is completely un-saturated, and a value of 100% leaves the image unchanged. Values above 100% increase the saturation levels.

.saturateElement {
       -webkit-filter: saturate(200%);


Hue-rotate is an exciting filter effect that alters the hue of an image by rotating the RGBA values around a color matrix.
Applies a hue rotation on the input image. The value of ‘angle’ defines the number of degrees around the color circle the input samples will be adjusted. A value of 0deg leaves the input unchanged. If the‘ angle’ parameter is missing, a value of 0deg is used. Though there is no maximum value, the effect of values above 360deg wraps around.

.huerotate {
       -webkit-filter: hue-rotate(180deg);


There are many CSS filters to choose from: grayscale, blur, sepia, saturate, opacity, brightness, contrast, hue-rotate, and invert. While each property value generally falls between 0 and 1, there are a few exceptions. The blur property uses a unit of pixels and can be any whole number, and the hue-rotate filter value is a whole number with a “deg” unit. As the specification is still under development, you might need to future-proof your work by including all the browsers vendor prefixes like so:

-webkit - filter: effect();
	-moz - filter : effect();
	-ms -filter : effect();
	-o - filter : effect();


Browser Compatibility:

As we mentioned before, this technology is developed with CSS, so it is supported by almost all major browsers except IE. IE is providing a set of DX filters since 1997 (IE4) which does this job with mere CSS and lot more. Now they have dropped DX filters in IE10 and are strictly following the standard SVG based filters. For IE10+ Seems a better, simpler solution, It needs compatibility mode switch in headers to work:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

it is possible that the syntax and behavior can be changed in future versions of browsers. Chrome and Safari requires the prefix -webkit- in css.  For today, it is supported by next browsers:

  • Chrome
  • Firefox
  • Safari
  • IE 7 to 9
  • Opera

Important: Internet Explorer 10, and above versions, do not support the filter property.

That’s it

I hope it’s been an interesting tutorial and not too hard to follow. I hope you like the result and don’t hesitate to share your thoughts about it. Thanks for reading!

view demo

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.!

We respect your privacy. Your information will not be shared with any third party and you can unsubscribe at any time.
You can support this website by sharing. Thank you!