CSS Filters are a powerful tool that allow us to achieve some amazing visual effects with our elements; they are especially great for hover effects.

Filters provide us with a method for modifying the rendering of a basic DOM element. They allow you to do things like blur, modify contrast, even the color of your element.

Creating filters

When I think about image filters, the first thing that comes to mind is the black and white filter; taking a full-color image and turning that image into a monochrome version of itself. This is the first filter we will look at.

To use this filter we just need:

img {
-webkit-filter: grayscale(1);
}

As you can see, you currently need the webkit prefix (this feature is only available in webkit browsers so far) the keyword filter and then the name of the filter with how much of it you want on the element.

In this case I chose 1 so that it becomes fully black and white but I could go for something like 0.5 and the image would be colored with 50% desaturation.

Something that always looks great on an image is some blur, let’s now add the blur:

img {
-webkit-filter: grayscale(0.5) blur(2px);
}

As you see, adding more filters is simple. If you test this in a browser you can see that both this filters apply properly to the image.

So far, so simple, right?

But if you want Photoshop like filters CSS also has that for you; let’s start with contrast. To apply contrast to an image is just as simple:

img {
-webkit-filter: contrast(300%);
}

In the case of contrast you must think of 100% as the starting point, if you set the value to 100% the image won’t change in any way; less than that value, 50% for example, will diminish the contrast; more than 100%, 150% for example, will make for a more vivid image.

Another very interesting filter we have at our disposal is hue-rotate, this one works very much like the Hue/Saturation panel in Photoshop.

img {
-webkit-filter: hue-rotate(180deg);
}

For this filter we need to use degrees to set the value, this may sound a bit confusing at first but what this filter does is take each pixel color value and rotate it around the color wheel. So, if your pixel is a blue and you rotate the hue 180 degrees, it will become orange.

We also have saturate, another effect widely used in Photoshop. Using this filter with a value higher than 100% will make the colors in your element more vivid as this filter also uses 100% as its starting point:

img {
-webkit-filter: saturate(300%);
}

And of course we have other filters like sepia, that works in a similar manner to the grayscale filter, where you input a value from 0 to 1:

img {
-webkit-filter: sepia(0.5);
}

We also have opacity and this one also works with values that range from 0 to 1:

img {
-webkit-filter: opacity(0.8);
}

Another one we have is invert, this one flips the colors on your element so if you place a value of 100% the output will look like a photo negative, values range from 0% to 100%.

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

One filter already have the functionality of is the drop-shadow filter. It takes the same values as the CSS box-shadow. The main difference is that when applying to a png with a transparent background, the shadow will be cast around the pixels rather than the outline of the png file. The CSS filter version is also hardware accelerated.

img {
-webkit-filter: drop-shadow(10px 10px 15px #000);
}

Finally we have brightness and this one is also something you have probably used in Photoshop before, this filter takes 100% as the starting value, if you set it to 100% nothing in the element will change, a value of 0% will turn your element black and a value of 200% will make it twice as bright:

img {
-webkit-filter: brightness(200%);
}

Conclusion

If you would like to see and play with these effects you can check out and modify the pen I created.

CSS filters are a very powerful way to modify your elements on the fly without the need for extra images, it’s all done with CSS. This gives us endless possibilities when it comes to handling user events visually.

By Sara Vieira
Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/CSS3 and jQuery. You can follow her on twitter or check out her website.
  • derSmoll

    Nice, but what about non-webkit browsers?

    • Sara Vieira

      It’s not supported by them yet :/

      • filter: grayscale(#foo) works in Firefox (where #foo is an ID selector to an inline SVG filter effect). I assume it’s possible to provide other effects too via SVG filter. (Haven’t checked though)

  • harryjatkins

    Great to know about the box-shadow being applied to PNGs around the actual pixels! Did not know that. Thanks!

  • When writing about Web Platform features, it’s always good to provide information about browser support.

    • Sara Vieira

      Sorry about that , it’s only in supported by webkit browsers.

      • false, you may use MS filters or svg masks

        • Sara Vieira

          I’m saying that with this syntax you will only see effects in Webkit browsers.
          Off course there are ways to get around it but what I meant is that using this syntax you can only get filters on webkit browsers.

          On the rest SVG works nicely.

      • ilikecss

        hehe, i think you should be add moz style in demo…. or

  • Thanks for giving me the useful information. I think I need it. Thank you

  • again no demo or caps

Home XML WordPress Web Services Web Development Web Design Underscore Uncategorized Tutorial Tools SQL Server Social Apps Snippet SEO Security RoR Responsive Design Resources Python PHP News MySQL Mobile Miscellaneous jQuery JavaScript Java J2EE HTML5 HTML Design Patterns