Tiffany B. Brown

Toying with CSS Filter Effects


A screen shot of what a photo 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.

One Response to “Toying with CSS Filter Effects”

  1. I’ve created an experiment using CSS filters and Google maps. Demo: http://iweb.uz/azik/interactive-globe-with-css-shaders-and-google-maps/