Web Platform Team Blog

Adobe

decor

Making the web awesome

Fun with Built-in CSS Filters

With all the buzz around CSS Custom Filters, you’re hopefully aware of all the cool effects you can play around with in Chrome Canary using our CSS FilterLab.  While we have to wait for CSS Custom Filters to hit mainstream browsers, you can use CSS Filter Lab to play with built-in CSS filters already available in most WebKit browsers today, including Chrome, Safari, and even Mobile Safari on iOS6.  These come to us from the world of SVG, where built-in filter shortcuts could be applied to SVG elements, but we will focus on the CSS specification here.  Built-in filters are easy to use by simply applying the filter property and using a filter function, which accepts a value as a parameter.  This is very similar to how CSS Transforms work. You can even apply multiple filters in the same filter property, the same way you can apply multiple transforms.  In these examples, I will be using the un-prefixed filter property, but current release versions of Chrome and Safari use the -webkit- experimental prefix.

Photo Filter Demo

It is possible to combine these filter functions in interesting ways to simulate complex photo filter effects.  You can extend the visuals even further by layering the same element at varying opacity with different filters applied.  We used a combination of filter functions to create a Photo Filter demo that we showcased at The Create The Web event in SF. This demo is now available on GitHub.

Here is what we used to create an Old-Style photo effect:

filter: sepia(0.8) saturate(3) brightness(0.25) contrast(2);

Before

After

After

You can use many other built-in filter effects in tandem. The available built-in filters are:

  • grayscale
  • sepia
  • saturate
  • brightness
  • contrast
  • opacity
  • invert
  • hue-rotate
  • blur
  • drop-shadow

Take a look at our code to find many ways these functions can be used to create complex photo filters. You can also read more about the built-in filters and their values in the specification.

As built-in CSS Filters are already available in Chrome, Safari, & Mobile Safari on iOS, you can start playing with them today and see how they can be used to enhance your web application. The CSS FilterLab is a great resource to play with filters and instantly see the results.

Have you been playing with Filter effects? Please do share your code samples with us in the comments!

4 Comments

  1. November 21, 2012 at 9:40 am, Maarten said:

    Are these also available in the Android browser?

    • November 21, 2012 at 12:49 pm, cjgammon said:

      We will hopefully see this feature coming to Android browsers soon. However, it does not seem to be currently available in the Android browser, you can track the availability status of CSS Filters on sites like caniuse.

  2. November 21, 2012 at 12:27 pm, Charles @ CodeConquest.com said:

    CSS filters can be used on elements other than images too. What I like about CSS filters is that they force anti-alias text smoothing, rather than the default sub-pixel rendering. I find anti-alias is a lot nicer to read.

  3. November 22, 2012 at 1:26 am, Filipa Mateus said:

    This is really awesome,i actually did not know that could be done with css.
    Guess I need to update my css knowledge :)