How to Apply CSS Filter Effects to Web Images

By . in Coding. Updated on .

Adjusting image Brightness and Contrast, or turning image into Grayscale or Sephia is a common feature you may find in image editing application, like Photoshop. But, it is now possible to add the same effects to web images using CSS.

This capability comes from the Filter Effects which actually is still in the Working Draft stage. However, the Webkit browser seems to be a step a head in implementing this feature.

So, let’s give it a try and we will use this image from Mehdi Kh to demonstrating the effects.

CSS Filter Effects

Applying the effects is very easy. Take a look at the snippet below, for turning images into grayscale;

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

…and this is for sepia ala Instagram.

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

Both the sepia and the grayscale values are stated in percentage where 100% is the maximum and applying 0% will keep the image unchange, but when the value is not explicitly specified the 100% will be taken as the default.

Brightening the image is also possible, and we can do it by using the brightness function, as follows;

 img {
 	-webkit-filter: brightness(50%); 
 }

The brightness effect works like the contrast and sepia effect above where the value of 0% will keep the image as it is and applying 100% will totally brighten the image, which would possibly show only a blank white page instead of an image.

The brightness effect also allows for negative values, in which it will darken the image.

 img {
 -webkit-filter: brightness(-50%); 
 }

..and we can adjust the image contrast this way.

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

There is a little difference on how the value works as well, as you can see in the above, we set the contrast() by 200%, this is because the value of 100% is the starting point where the image will remain unchanged. When the value is below 100%, let’s say 50%, the image will become less contrasted.

Furthermore, we can also combine the effect in one declaration block, such as in the example below. We turn the image into grayscale and increase the contrast by 50% at the same time.

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

By combining the filter with CSS3 transition we can make a graceful hover effect.

 img:hover {
 	-webkit-filter: grayscale(0%);
 }
 img:hover {
 	-webkit-filter: sepia(0%); 
 }
 img:hover {
 	-webkit-filter: brightness(0%); 
 }
 img:hover {
 	-webkit-filter: contrast(100%); 
 }

Lastly, there is one more effect we can try; the Gaussian Blur, which will blur the targeted element.

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

Like in Photoshop, the blur value is stated in pixel radius and if the value is not explicitly stated, the <0 will be taken as the default and the image is left as it is.

Final Thought

There are actually a lot more effects in the spec. such as hue-rotate, invert and saturate, but I think they are less applied in real Web cases. Thus, the discussion was limited to just four effects.

And, despite the discussion being applied to images in this tutorial, the property can actually also be applied to any element in the DOM.

Finally, you can view the live demo from these links below. Please take note that the Filter is currently only supported in Chrome 19 and above.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail