What's this?

Demo showing CSS Filter Effects 1.0, specifically the filter functions, which are being implemented in Webkit.

In Webkit, filters can be applied to hw accelerated content ( e.g. img { -webkit-transform: translateZ(0); } ). In Chrome, filters on hw accelerated content are still a work in progress (use the --enable-accelerated-filters flag) or enable the feature in about:flags. This includes <video>, which is accelerated by default.

Support: Chrome 18.0.976.0, Webkit nightly

CSS Filter Effects

-webkit-filter: none;
blur grayscale drop-shadow sepia brightness contrast hue-rotate invert saturate opacity
Animations: