“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

Grayscale

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

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%);
}

Blur

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);
}

Invert

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

Saturate

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

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);
}

Conclusion

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!DhirajCSS - Cascading Style SheetsHTMLMobile Web TechnologyTutorialsadvance web technology,animation delay,animation direction,color to grayscale css,configurable settings,cross browser compatibility,cross browser css filter,CSS,CSS 3,CSS 4,css file,css filter,css filter alpha,css filter black and white,css filter blur image firefox,css filter brightness,css filter effects,css filter grayscale,css filter grayscale firefox,css filter grayscale ie,css filter grayscale internet explorer,css filter Hue-rotate,css filter invert color,css filter invert color firefox,css filter invert color ie,css filter Saturate,css filter sepia ie10,css filter support,css filter with svg,CSS framework,css namespaces,css3,css3 box shadow,doctype html,elements,firefox css filter sepia,format svg,free open source,gaming,graphical user interface,grayscale filter,html5,ie filter grayscale,ie support for css filter,image filter,interactive web applications,mobile,ms filter,page elements,sepia filter,style,transparent background image,visual transition'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...Web design / development tutorials covering HTML, jQuery & CSS. Cool tips and tricks of web designing using HTML5, CSS3 & jQuery Library. Latest updates in responsive or mobile web technology.