Before I get started you should know that at the time of writing CSS Filter Effects are not supported in the latest versions of ie(11) and Firefox(27) so if you are using them you should try Chrome, Safari, or Opera instead.

CSS filter effects are quickly becoming one of the hottest topics among web designers. They allow us to do some cool stuff that we generally only do within image editing software like PhotoShop. This article explains how to use CSS filter effects in your designs today.

The Functions

CSS filter effects consist of a set of functions that can be used to alter images and other HTML elements.

• blur()

• brightness()

• contrast()

• drop-shadow()

• grayscale()

• hue-rotate()

• invert()

• opacity()

• saturate()

• sepia()

blur()

If you’ve ever used a Gaussian blur in PhotoShop then this is something you’re already familiar with. The blur function accepts a radius that is passed as a regular CSS length value, however, percentage values are not supported. Larger values create more of a blur. 0 is the default value.

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

Original

blur

brightness()

The brightness function will adjust the brightness of the image. The smaller the value the darker it will be. A value of 0 will make the image completely black. Values over 1.0 will make the image brighter than the original. 1.0 is the default value.

img {
    -webkit-filter: brightness(0.65);
    filter: brightness(0.65);
}

Original

brightness

contrast()

The contrast function will adjust the contrast of the image. The smaller the value the darker it will be. A value of 0 will make the image completely black. Values over 1.0 will increase the contrast of the original. 1.0 is the default value.

img {
    -webkit-filter: contrast(1.65);
    filter: contrast(1.65);
}

Original

contrast

drop-shadow()

In an earlier post I explain the difference between filter: drop-shadow() and box-shadow so if you want to know the difference between the two you should read that. For the purposes of this article you should just know the drop shadow function exists. Like other image editing software you can specify an x and y offset, a blur radius, a spread radius, and a color value for the shadow.

• offset-x — A required value that specifies the horizontal distance the shadow will be offset and a negative value will place the shadow to the left of the element

• offset-y — A required value that specifies the vertical distance the shadow will be offset and a negative value will place the shadow above the element

• blur-radius — An optional value that specifies the size of the shadow. Larger values will increase the size and blurriness where as smaller values will reduce the size and make it sharper

• spread-radius — An optional value that specifies the size of the shadow without blurring it. Larger values will increase the size where as smaller values will reduce the size

• color — An optional value that specifies the color of the shadow. Different browsers have different default colors so you’ll probably want to set this

img {
    -webkit-filter: drop-shadow(5px 5px 8px currentColor);
    filter: drop-shadow(5px 5px 8px currentColor);
}

Original

drop-shadow

grayscale()

The grayscale function removes the color from the image. It is controlled on a scale of 0% to 100% with 100% being completely grayscale. 100% is the default value.

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

Original

grayscale

hue-rotate()

The hue-rotate function will adjust the hues of the image based on angles of the color wheel. It has a maximum rotation of 360deg. 0deg is the default value.

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

Original

hue-rotate

invert()

The invert function inverts the colors of the image. It is controlled on a scale of 0% to 100% with 100% being completely inverted. 100% is the default value.

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

Original

invert

opacity()

The opacity function sets the opacity of an element. It is pretty much the same as the CSS “opacity” property that we’ve already been using accept that certain browsers provide hardware acceleration to help with performance. It is controlled on a scale of 0% to 100% with 0% being completely transparent. 100% is the default value.

img {
    -webkit-filter: opacity(65%);
    filter: opacity(65%);
}

Original

opacity

saturate()

The saturate function controls the saturation of colors within an image. A value of 0 will make the image completely un-saturated. Values over 1.0 will increase the saturation of the original. 1.0 is the default value.

img {
    -webkit-filter: saturate(1.65);
    filter: saturate(1.65);
}

Original

saturate

sepia()

The sepia function converts the image to a sepia tone. It is controlled on a scale of 0% to 100% with 100% being completely sepia tone. 100% is the default value.

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

Original

sepia

Can I Use More Than One Filter at a Time?

Yep, you sure can. Here’s how you would do that:

img {
    -webkit-filter: invert(100%) drop-shadow(5px 5px 8px #000);
    filter: invert(100%) drop-shadow(5px 5px 8px #000);
}

Original

Multiple

Can I Use Filters With Animations?

Yep, you sure can, take a look at this example:

@-keyframes filterAnimation {
    0% {
        invert(0%) opacity(100%);
    }
    100% {
        invert(100%) opacity(50%);
    }
}

img {
    animation-name: filterAnimation;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

Original

Animated

CSS Filter Performance

There are some performance considerations with some of the CSS Filter functions. The drop-shadow and opacity functions utilize hardware acceleration in various browsers possibly resulting in a performance gain over box-shadow and the CSS “opacity” property.

In general the filters that apply blurring effects will tend to be less performant than those that do not. But, in browsers that take advantage of hardware acceleration this shouldn’t be an issue.

Browser Support

Browser support is not great. CSS filters are still considered experimental because the spec is still in the working draft phase. There is currently no support in Firefox and ie, nope not even ie11.

Sources

• http://caniuse.com/css-filters

• http://davidwalsh.name/css-filters

• http://www.html5rocks.com/en/tutorials/filters/understanding-css

• https://developer.mozilla.org/en-US/docs/Web/CSS/filter