CSS Filters

Browser Support for CSS Filters

18.0

6.0

-

-

-

Introduction to filters

It's worth noting that right now, CSS Filter Effects are an unoffical specification – however, the editors of the spec include representatives from Adobe, Apple and Opera, and we have already got implementations in Chrome, Safari and iOS 6. The specficiation can be found here.

Right now filters apply to the whole element and all it's descendants, though it looks like sooner or later there will be the ability to target just the background or the border in addition the the whole element.

Though CSS filters encompass a huge range of possibilities, the most common usage will be the canned effects, namely grayscale, sepia, saturate, hue-rotate, invert, opacity, brightness, contrast, blur and drop-shadow.

Filter Playground

Play with the sliders…

Drop Shadow

At this point it's worth pointing out that the drop shadow here is amazingly awesome. Here's a quick comparison to show why:

The left has a box shadow, which predictably shadows the whole box, the right has a CSS filter applied, and because it's a PNG with alpha transparency, the shape of the object gets a shadow. This is pretty cool stuff!

What can you do with them?

As examples show up, I'll list them below, but here are a few ideas for how you can use these: