How to Use CSS Filter Effects
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()
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.