CSS Filter: Convert Colored Images to Grayscale, Sepia, Saturate, Invert and more

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 and more. Though, this feature is not yet widely supported, but they are indeed impressive and a modern need for web imagery.

Black and White

With the grayscale property, we can archive a black nd 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:

.blackandwhite {
-webkit - filter: grayscale(1); /* Older webkit versions */
-webkit - filter: grayscale(100%);
-moz - filter : grayscale (100%);
-ms -filter : grayscale(100%);
-o - filter : grayscale(100%);
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");
}

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


Grayscale

With the same grayscale property we can archive that grayscale look, but this time we are setting the value to 50%.

.grayscale {
       -webkit-filter: grayscale(50%);
}

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.

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

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.

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

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.

.saturate {
       -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);
}

Right now a number of the CSS filter effects are working perfectly well in Webkit based browsers and Mozilla. We expect to see them soon in Opera as well as IE10. 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();

Note: If any user chooses to download the image, it is downloaded in its original colored displays.


Other resources

• Filter - Mozilla Developer Network
• Understanding CSS Filter Effects - HTML5Rocks
• Say Hello to Webkit Filters - tutsplus

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz