Filters are a relatively new and rapidly evolving part of CSS, broadly classified into three types:

• “Basic” CSS filters, which have very good support outside of Internet Explorer.
• Blend modes, a specification promoted by Adobe: very new, and strongly related to the filter modes of Adobe PhotoShop.
• Custom Filters, aka Custom Shaders: code derived from the WebGL spec. Also very new, but the most powerful of the available filter set. Strictly speaking, not CSS at all, and therefore not addressed in this reading list.

There are also <canvas> filters, but they are essentially JavaScript versions of the first two kinds of CSS filter.

Why Use Filters?

Using CSS filters to alter HTML content provides several advantages:

• PhotoShop filter effects are “baked” into bitmap images, and must be reprocessed in the application to make any changes; modifying a single declaration in a stylesheet can immediately alter a CSS filter.
• CSS filters can be animated and transitioned.
• Filters can substantially reduce file sizes.

Goals: apply cross-browser filters to different HTML content

Prerequisites: Introduction to CSS, Basic HTML Images, CSS for Images

Recommended: CSS Transforms & Animation

1. Introduction
2. Convert Images To Black & White
3. Sepia-tone Photographs
4. Image Blur
5. Text Blur
6. Animating Filters
7. Filters for Icons

Photograph by Steve Jurvetson, licensed under Creative Commons.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.