The feature illustrates how powerful CSS has become

Jun 5, 2012 11:53 GMT  ·  By

HTML5 is the popular catch-all term for all modern web technologies, but there are several separate efforts to make the web more powerful and more beautiful. CSS3 is about the latter. Google Chrome now has support for CSS filters, powerful tools for transforming the look of any HTML element.

The filters work best with images, but can be applied to any element. Anyone who has done any image manipulation will find the filters quite common, perhaps even unimpressive.

But so far, these types of filters were found in photo-editing apps, not built into browsers. Google Chrome supports CSS filters and uses the GPU to accelerate them, making sure the sites using them don't become resource hogs and slow down the computer.

"The current set of supported filters in Chromium include many that are familiar to web developers with image processing experience, such as sepia, saturation, opacity, and blurs," Google explained.

"If you’re a web designer looking to add dynamic visuals to your next page layout, a developer building a photo editing app, or a game developer looking for an easy way to add effects to your next title, CSS filters can help you get there easily," it added.

For simple web design, filters may be overkill, it's probably best to just apply them to the images that make up your site's design than to use them to dynamically alter elements. Even with GPU acceleration, filters can take a toll on the browser especially when used indiscriminately.

But there are plenty of apps that could benefit from filters, already there are some that put them to good use. Games and UI heavy web apps can benefit the most, but CSS filters have even been used as the basis for a painting app. Support for the feature is experimental in Chrome, the first browser to support CSS filters at all.