CSS Filterlab

While we have to wait for CSS Custom Filters to hit mainstream browsers, you can use CSS Filter Lab to play with built-in CSS filters already available in most WebKit browsers today, including Chrome, Safari, and even Mobile Safari on iOS6.

With CSS Filters you can create stunning effects. filter: sepia(0.8) saturate(3) brightness(0.25) contrast(2); for example results in:

CSS Filterlab →
iPhone Filter Demo Source (GitHub) →

GPU Accelerated CSS Filters in Chromium


img { -webkit-filter: sepia(100%) contrast(200%) blur(5px); }

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.

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.

Not to be confused with the legacy IE filter CSS property, which has been deprecated in favor of the new filters.

Accelerated CSS Filters Landed in Chromium →
Understanding CSS Filter Effects (html5rocks.com) →
Legacy DX Filters Removed from IE10 Release Preview →