CSS filters offer web developers some very powerful tools, powerful enough that it wouldn't be too hard to create a web app capable of producing the kind of effect-laden photos popularized by Instagram. There's just one problem: CSS Filters can be hard on the CPU.
Few things on the web get your PC's fan spinning quite like CSS Filters – just give Google's abstract painting demo page a try to see for yourself. Filters alone can send your fan spinning, but combine them with some CSS transitions or animations and you've got a recipe for battery draining excess.
That, combined with the fact that so far they only work in WebKit browsers, means right now you should use CSS Filters with caution.
Fortunately the roaring sound of your fan may soon be a thing of the past, at least for Google Chrome users. The Chromium blog reports that CSS Filters with GPU acceleration have landed in Chromium. It will be some time before the acceleration makes its way into the stable version of Google Chrome, but it is coming and that's good news for the future of CSS Filters. Stephen White, a Software Engineer at the Chromium project, writes, "GPU acceleration of these filters brings their performance to the point where they can be used for animating elements in conjunction with CSS animations powered by -webkit-transition or even HTML5 video tags."
It might be a while yet before Adobe launches a web-based version of its Premiere video editor, but expect other browsers to follow Chrome's lead in supporting and speeding up CSS Filters.
It's worth noting that, while the Instagram use case tends to get all the press, CSS Filters can do a lot more than just sepia toning images. In fact potential uses go far beyond just images or video. For example, CSS Filters could be used to blur backgrounds (or make them black and white) thus highlighting foreground content in online diagrams, charts or educational apps. CSS Filters could replace image sprites in navigation elements (less to download means faster page load times) and could also be used in conjunction with some animation to let users know that something on a page has changed.
For more info on CSS Filters, check out our earlier coverage and have a look at the HTML5Rocks site, which offers a nice overview of CSS Filters along with some example code.
