Developer

CSS3 filter effects: Grayscale, invert, sepia, and more

Ryan Boudreaux demonstrates some applications of various CSS3 filter effects, including grayscale, sepia, saturation, and combined effects.
In my previous piece on CSS3 Filter Effects, I reviewed how the filters have evolved from the SVG format to the current specification and demonstrated how several of the effects can be implemented. I showed examples of the blur, brightness, contrast, and drop shadow filter effects. In today's segment, I will continue with reviewing the CSS3 filter effects including grayscale, hue rotate, invert, opacity, saturate, sepia, and combined effects, which include creating a black and white element. And lastly, I will review the current browser support for the CSS3 filter effects. A download of the HTML and CSS files used in the demonstrations is available at the end of this piece

Grayscale

Setting the grayscale to an image is done by percentages as shown in the example CSS code snippet below and the side-by-side comparison as displayed in Figure B (Google Chrome Version 22.0.1229.94 m).

Grayscale set to fifty percent:

/* Grayscale Filter Effect */
.grayscale {
       -webkit-filter: grayscale(50%);
}

Figure B

Hue rotate

Setting the hue rotation is a filter effect to alter the hue of an image by rotating the RGBA values around a color matrix. The setting is made with setting the degree of the rotation from 0 degrees to 360 degrees. The hue rotation example is shown in the example CSS code snippet below and the side-by-side comparison as displayed in Figure C.

Hue rotation set to 180deg:

/* Hue Rotation Filter Effect */
.huerotation {
       -webkit-filter: hue-rotate(180deg);
}

Figure C

Invert

The invert filter effect reverses the hue, saturation, and brightness values of the content of the object and is expressed as a percentage. The invert example is shown in the example CSS code snippet below and the side-by-side comparison as displayed in Figure D.

Invert set to 100%:

* Invert Filter Effect */
.invert {
-webkit-filter: invert(100%);
}

Figure D

Opacity

The opacity filter effect is measured by the level of range from completely transparent to completely opaque, and is measured from 0 to 100, with 0 being completely transparent and 100 being completely opaque. The opacity example is shown in the CSS code snippet below and the side-by-side comparison as displayed in Figure E.

Opacity set to fifty percent:

/* Opacity Filter Effect */
.opacity {
       -webkit-filter: opacity(50%);
}

Figure E

Saturate

The saturate filter is used to vary the intensity of color in the element. A saturated element has overly bright colors; you can increase saturation on under-exposed images, or vice versa. The amount of saturation can be expresses in percentages, where a value of 0% is completely un-saturated, and a value of 100% leaves the input unchanged. Values above 100% increase the saturation levels. This example shows the saturation levels for the right side image are set to 250% as displayed in Figure F as shown in Google Chrome Version 22.0.1229.94 m.

The CSS code snippet:

/* Saturate Filter Effect */
.saturate {
       -webkit-filter: saturate(250%);
}

Figure F

Sepia

The sepia filter effect is a brownish-grey to dark yellowish-brown tone imparted to an element and is expressed in percentages from 0% to 100%. The example displayed below shows the CSS3 sepia filter effect on the right side image with a setting of 100%.

/* Sepia Filter Effect */
.sepia {
       -webkit-filter: sepia(100%);
}

Figure G

Combine effects

You can also combine filter effects with very good results; you can create black and white effects with a combination of grayscale, brightness, and contrast among others.

Black and white combined effect

Using the following CSS filter effects in combination will create a crisp black and white effect as displayed in Figure H.
/* Combined Filter Effects - Black and White */
.blackwhite {
         -webkit-filter: grayscale(100%) brightness(10%) contrast(100%);
}

Figure H

Browser support

As you might have noticed from the vendor prefix in the CSS code snippets, Webkit is currently the only supported layout engine for CSS filter effects. WebKit powers the Apple Safari and Google Chrome browsers. Current browser and user agent support can be found from the "Can I use..." table for CSS3 Filter Effects; it shows that Chrome 21+, Safari 6+, and Blackberry Browser 10+ fully support the filter effects.

Don't put away that image editing software just yet; however, you can see that the future does look bright for coding your CSS3 filter effects with styles and stylesheets.

The example HTML and CSS files are available for download.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

8 comments
mandysutton
mandysutton

This looks great but isn't IE still the most popular browser? What's the point of deploying CSS3 if it's not supported in most people's browsers?

Editor's Picks