CSS Filter Effects

Filters let us apply a variety of Photoshop-like effects to HTML content with simple CSS syntax. With the filter property we can create hardware-accelerated filter effects like grayscale, blur and contrast all with a single line of CSS. In this article, we’ll cover a few of the CSS filter effects we can achieve with this powerful new feature.

A Bit of History

Filters were originally created as an SVG (Scalable Vector Graphics) feature for applying image processing effects to vector graphics. In 2008, Robert O’Callahan from Mozilla thought filters had “major limitations” because they could not be used to enhance HTML content. So he put his forward-thinking cap on and started experimenting with ways to apply the effects to HTML content via CSS. Fast forward a few years and the W3C, with help from Adobe, Apple and Opera created a spec, which landed in WebKit browsers late last year (2011).

How CSS Filters Work

Filters can be applied to DOM elements such as images, text, even canvas and video elements. They accept parameters that control how much filtering is done. Before the rendered page loads, the filter takes a snapshot of the page as a bitmap. Then, based on the parameters we pass, it applies the effect over the original page image before it’s composited and rendered into the document.

Now for the Fun Part

Keep in mind that for now we’ll need to use the vendor prefixed version of the filter property, as it’s still a work in progress and things can change at any time. To see how they work we’ll use an image of our good buddy Mike the Frog as our input.

grayscale

The grayscale filter converts our input image to black and white.

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

We used 100%, which is completely grayscale. A value of 0% would leave the image unchanged.

hue-rotate

This filter adjusts the hues based on the hue angles in the color wheel and the input image’s original colors; it shifts every hue around the color wheel by the degree parameters we provide.

img {
  -webkit-filter: hue-rotate(150deg);
}

The green hue angle in the original image is around 63º. When the hue is shifted 150º, the result is a bluish hue in the 213º range.

sepia

This filter applies a sepia tone (like in antique photographs).

img {
  -webkit-filter: sepia(100%);
}

A value of 100% makes Mike the Frog look like a character from an old western movie.

contrast

We can also adjust the contrast of our image. A value of 0% generates a black image and 100% returns the original image.

img {
  -webkit-filter: contrast(250%);
}

We went beyond 100% to generate a high-contrast look.

blur

With blur we can apply a Gaussian blur effect to our image.

img {
  -webkit-filter: blur(6px);
}

The blur radius parameter passed affects how many pixels blend into each other. The larger the pixel value, the more blur it creates.

Combining Filters

We can use more than one filter by space-separating each one. This can create some interesting visual effects.

img {
  -webkit-filter: grayscale(100%) brightness(-5%) contrast(180%);
}

Here we’ve combined grayscale, brightness and contrast to generate a Noir style Mike the Frog.

drop-shadow

The parameter passed is similar to the syntax for box-shadow.

img {
  -webkit-filter: drop-shadow(20px 15px 20px #000);
}

You may be asking yourself “We can already do this with box shadows, what’s the purpose?” Well, the drop-shadow filter takes things a step further — it’s a little more powerful than CSS box shadows. For example, if we give our image a dashed border, notice how the filter generated shadow follows the dashes.

Also, take a look at what it does with transparent background areas. I’ve removed the background of the image (in Photoshop) and saved it as a transparent PNG. Whereas box-shadow casts a shadow off the edges of the image, the drop-shadow filter follows the transparent areas of the image.

Browser Support

Currently, these filters are only implemented in WebKit based browsers (Chrome, Safari and iOS Safari), so we need to include the ‘-webkit-‘ vendor prefix for now. However, it is best practice to use all the vendor prefixes (that’s up to you). If you want to stay current with browser support, take a look at the latest compatibility table.

CSS filters are just another example of how we shouldn’t limit ourselves to Photoshop when designing for the web. It’s powerful tools like these that help developers and designers further bridge the gap between design and code.