CSS Click Chart

Filter Effects

Includes different features that allow you to add Photoshop-like effects to elements (hue, grayscale, sepia, blur, invert, saturate, etc.) using pure CSS.

Specification

Filter Effects on W3C

Example Code

[ select code ] [ disable auto-size ]

Live Demonstration

The first image is the original. The next one has a "grayscale" filter applied.

Chevrons Chevrons

Browser Support

Can I Use css-filters? Data on support for the filters feature across the major browsers from caniuse.com.

Tools / Polyfills

Tutorials / Articles