CSS Filters are a powerful tool that allow us to achieve some amazing visual effects with our elements; they are especially great for hover effects.
Filters provide us with a method for modifying the rendering of a basic DOM element. They allow you to do things like blur, modify contrast, even the color of your element.
Creating filters
When I think about image filters, the first thing that comes to mind is the black and white filter; taking a full-color image and turning that image into a monochrome version of itself. This is the first filter we will look at.
To use this filter we just need:
img {
-webkit-filter: grayscale(1);
}As you can see, you currently need the webkit prefix (this feature is only available in webkit browsers so far) the keyword filter and then the name of the filter with how much of it you want on the element.
In this case I chose 1 so that it becomes fully black and white but I could go for something like 0.5 and the image would be colored with 50% desaturation.
Something that always looks great on an image is some blur, let’s now add the blur:
img {
-webkit-filter: grayscale(0.5) blur(2px);
}As you see, adding more filters is simple. If you test this in a browser you can see that both this filters apply properly to the image.
So far, so simple, right?
But if you want Photoshop like filters CSS also has that for you; let’s start with contrast. To apply contrast to an image is just as simple:
img {
-webkit-filter: contrast(300%);
}In the case of contrast you must think of 100% as the starting point, if you set the value to 100% the image won’t change in any way; less than that value, 50% for example, will diminish the contrast; more than 100%, 150% for example, will make for a more vivid image.
Another very interesting filter we have at our disposal is hue-rotate, this one works very much like the Hue/Saturation panel in Photoshop.
img {
-webkit-filter: hue-rotate(180deg);
}For this filter we need to use degrees to set the value, this may sound a bit confusing at first but what this filter does is take each pixel color value and rotate it around the color wheel. So, if your pixel is a blue and you rotate the hue 180 degrees, it will become orange.
We also have saturate, another effect widely used in Photoshop. Using this filter with a value higher than 100% will make the colors in your element more vivid as this filter also uses 100% as its starting point:
img {
-webkit-filter: saturate(300%);
}And of course we have other filters like sepia, that works in a similar manner to the grayscale filter, where you input a value from 0 to 1:
img {
-webkit-filter: sepia(0.5);
}We also have opacity and this one also works with values that range from 0 to 1:
img {
-webkit-filter: opacity(0.8);
}Another one we have is invert, this one flips the colors on your element so if you place a value of 100% the output will look like a photo negative, values range from 0% to 100%.
img {
-webkit-filter: invert(100%);
}One filter already have the functionality of is the drop-shadow filter. It takes the same values as the CSS box-shadow. The main difference is that when applying to a png with a transparent background, the shadow will be cast around the pixels rather than the outline of the png file. The CSS filter version is also hardware accelerated.
img {
-webkit-filter: drop-shadow(10px 10px 15px #000);
}Finally we have brightness and this one is also something you have probably used in Photoshop before, this filter takes 100% as the starting value, if you set it to 100% nothing in the element will change, a value of 0% will turn your element black and a value of 200% will make it twice as bright:
img {
-webkit-filter: brightness(200%);
}Conclusion
If you would like to see and play with these effects you can check out and modify the pen I created.
CSS filters are a very powerful way to modify your elements on the fly without the need for extra images, it’s all done with CSS. This gives us endless possibilities when it comes to handling user events visually.
