CSS3's image filters give us benefits similar to the ones we got with the new background-image options. Using CSS3 filters lets us manage fewer image files and we can make small tweaks right in the code instead of jumping over to our image software. These are implemented via the filter property. There are many different filters to use, and the way they calculate values differs. But they are all written as the name of the filter, followed by parentheses that contain the numerical value used. Each table below describes a filter, shows an example image affected by it, and gives the code that was used for that example. If the filters do not work for you in Google Chrome, you may need to add the -webkit- prefix to the filter property.
| blur() | |
 |
This combines groups of pixels together in a way that produces an effect that blurs the image. The value used is the number of pixels to be blurred together. The higher the number, the greater the blur.
-webkit-filter:blur(3px);
|
| hue-rotate() | |
|
The coloration of the image will be changed by setting a degree value from the hue coloration wheel. The value is entered as the number followed by "deg". These are the same degree values used when setting the "h" value in the hsl color choosing method.
-webkit-filter:hue-rotate(90deg);
|
| opacity() | |
|
This functions the same as the opacity property. A value of 100% is fully opaque, and 0% is fully transparent. Everything in between is varying degrees of semi-transparent.
-webkit-filter:opacity(25%);
|
| brightness() | |
|
How bright an image is can be lightened or darkened. A value of 100% is the image's default value. Anything lower will darken the image, and anything over 100% will lighten the image.
-webkit-filter:brightness(50%);
|
| contrast() | |
|
The amount of contrast in the image can be increased or decreased. A value of 100% is the image's default value. Anything lower will lower the contrast, and anything over 100% will increase the contrast.
-webkit-filter:contrast(150%);
|
| saturate() | |
|
The saturation of the image's colors will be increased or decreased. A value of 100% is the image's default value. Anything lower will desaturate the colors, and anything over 100% will exaggerate the color saturation.
-webkit-filter:saturate(50%);
|
| drop-shadow() | |
|
This filter adopts the same values as box-shadow or text-shadow. The main benefit here is that this filter will follow the contour of an irregularly shaped image, as opposed to box-shadow just adding a shadow around the box-shaped image container.
-webkit-filter:drop-shadow(-5px -5px 5px #000000);
|
| grayscale() | |
|
An increase in this value alters the image toward a grayscale palette. A value of 0% will have no effect, and will transition up until complete grayscale at 100%.
-webkit-filter:grayscale(100%);
|
| invert() | |
|
This filter adjusts the image to give it an inverted color palette. A value of 0% will have no effect, and 100% will result in opposite colors.
-webkit-filter:invert(100%);
|
| sepia() | |
|
An increase in this value alters the image toward a sepia tone color palette. A value of 0% will have no effect, and will transition up until a complete sepia tone palette at 100%.
-webkit-filter:sepia(100%);
|
Multiple filters can be applied to an image at the same time as well. Use the filter property as normal, and just add any filter types you would like, being sure to leave a space between them.
