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.

The possibility of applying filter effects to video piqued my interest. Remember that snazzy HTML5 photo booth demo I cooked up in January with the WebRTC APIs in Chrome? It takes only one line of simple CSS code to apply the sepia effect to the live video stream from the camera. It renders with the sepia coloring in real time.

I can’t muster much enthusiasm over the potential for hipster photo features in Web applications, but there are plenty of other ways that the filter effects could be put to good use. For more details about the feature, have a look at the detailed coverage in the HTML5 Rocks blog.