CSS Click Chart

common stuff
cutting-edge

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

.element {
  -webkit-filter: hue-rotate(80deg); 
}

.element2 {
  -webkit-filter: blur(3px); 
}

.element3 {
  -webkit-filter: sepia(80%);
}

.element4 {
  -webkit-filter: grayscale(100%);
}

Live Demonstration

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

Browser Support

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

Tools / Polyfills

CSS Filter Effects
CSS Filters Playground
cssFilters.co

Tutorials / Articles

CSS Filters on David Walsh Blog
CSS Filter Effects: Blur, Grayscale, Brightness and More in CSS!