The CSS3 Filter property

The CSS3 Filter property

The long awaited CSS3 Filter property was recently landed in webkit, currently it’s only supported in Chrome (18.0 +) and Safari (5.1 +) with the -webkit- prefix but surely other browsers will join to support the filter property. Now let’s look at what is the CSS3 filter property, how the syntax looks and how to use it.


The CSS3 filter property

With the CSS3 filter property we can easily accomplish effects like blur, grayscale, sepia, contrast and many more. These filter properties can be applied to any HTML element or image. The filter syntax is simple and looks the following:

filter: filter(value);

As you might expect browser prefixes are required. The filter syntax with the browser prefixes looks the following:

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

Note: Multiple filters can be applied to any element or image, simply use a space. Example:

filter: blur(5px) grayscale(100%);

I think it’s easier to understand the filter property through visual examples. So, I will be applying the filter properties to an image to demonstrate how they work.


The original image looks the following:

CSS3 Filter property

Blur

Ever wanted to add a Photoshop like blur effect to an image just with CSS ? Now you can with the blur property. Blur is measured in pixels, so a larger value will create more blur.

CSS3 Filter Blur
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);


Brightness

The brightness value specifies how bright the element should be. You can specify the brightness with percentages or with floating point number.

CSS3 Filter Brightness
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);
filter: brightness(50%);


Saturate

With the saturation effect you can make the images look more vivid and funky. The saturation is measured by percentages. Note: Make the value greater than 100% to really see the saturation effect.

CSS3 Filter Saturate
-webkit-filter: saturate(400%);
-moz-filter: saturate(400%);
-o-filter: saturate(400%);
-ms-filter: saturate(400%);
filter: saturate(400%);


Hue Rotate

It’s a quite interesting filter effect, this effect rotates the colors (imagine a wheel of colors which you then rotate) to the specified degree. It’s measured in degrees.

CSS3 Filter Hue Rotate
-webkit-filter: hue-rotate(90deg);
-moz-filter: hue-rotate(90deg);
-o-filter: hue-rotate(90deg);
-ms-filter: hue-rotate(90deg);
filter: hue-rotate(90deg);


Invert

If we add 100% as a value output will look like a photo negative. As you probably realized it’s measured by percentages.

CSS3 Filter Invert
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
filter: invert(100%);


Grayscale

This is my favorite filter property of them all. The ‘amount’ applied controls how much gray conversion is applied.

CSS3 Filter Grayscale
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);


Sepia

Measured by percentages. A 100% ‘amount’ makes all the colors completely sepia toned.

CSS3 Filter Sepia
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);
filter: sepia(100%);

Contrast

Adds more contrast to the images. Measured by percentages, the default value is 100%. By applying 0% the image will be completely black, greater than 100% adds more contrast.

CSS3 Filter Contrast
-webkit-filter: contrast(200%);
-moz-filter: contrast(200%);
-o-filter: contrast(200%);
-ms-filter: contrast(200%);
filter: contrast(200%);


Opacity & Drop-shadow filter properties

These two filter properties I will not discuss in this article because these effects can be easily accomplished with CSS3 properties like opacity and box shadow with better browser support.


Performance

According to an HTML5 Rocks article, the CSS3 filters are fast and will run really quickly on any platform and have very minor performance impact. The only filter properties you should care about are blur and drop-shadow. Since the drop shadow effect can be easily accomplished with the CSS3 box-shadow property I think it’s smarter to use this property instead of drop-shadow while the performance is bad. With the blur property we are not so lucky we have to use it to make cool effects but one thing needs to be considered the more you increase the value of the blur the more inefficient will be.