Go back to home page of Unsolicited Advice from Tiffany B. Brown

Toying with CSS Filter Effects

A photo of Saba with a CSS filter applied

A screen shot of what a [photo](http://www.flickr.com/photos/tiffanybrown76/2042686483/) looks like with a `hue-rotation` filter applied.

I spent this weekend getting my feet wet with CSS Filter Effects, in particular, the filter functions. They're easy and fun to use, allow us to do really neat effects in the browser without requiring <canvas>. The current version of the specification includes CSS Shaders, which use GLSL and the custom() function.

I whipped up a demo of the filter functions in action. It does not, however, include custom filters. That will come :-). It works in the latest versions of Chrome/Chromium and Safari 6.

A note about performance when using these filters: blur() can be a b*tch. A small blur radius is fine, but larger radiuses can cause the UI to lag quite a bit in Chrome. Use it judiciously.