Have you ever wanted to apply Instagram-like filters to HTML elements? Well, now you can. The CSS Filter Effects specification, which is backed by Adobe, defines a mechanism for applying common graphical filters to Web content. It can be used to adjust brightness, saturation, hue, and contrast. It can also apply sepia, blur, and shadow effects.
The feature first landed in WebKit last year
and has been making its way into Web browsers. The feature was supported out of the box in Chrome 19, which was released last month
, but it's about to get a whole lot better. In recent Chromium builds, the filter effects are now offloaded to the GPU. This support for hardware-accelerated rendering will boost the performance of filter effects, making it practical to use in a wider range of scenarios.
Google highlighted the GPU support in an entry
posted this week in the official Chromium blog. According to Google software engineer Stephen White, the performance of CSS filter effects in Chrome has been elevated to the point where it can now be used efficiently with animations or applied to an HTML5 video element.