We all understand how much time consumed in converting an image into grayscale using Photoshop or making a sprite image which toggles on hover from grayscale to color and vice versa and adjusting saturation, or applying correct filters and blurring images etc. 

Imagine what it will mean to you using CSS filter and saving the precious time to focus on development.

Using filters, we may drop few images count and speed up the load time of our webages. We can save time and focus on other UI task by using css filters. 

So, here is the basics - with CSS filters we can do all those extensive time taking task easily wether its images, DOM elements and even videos. We can easily blur, turn an image into grayscale, set hue, saturation and contrast, and invert etc. with few lines of CSS code without using Photoshop.

So the question is how we can do it?

Well before start applying filters, let's see all the available options -

  • grayscale()
  • blur()
  • sepia()
  • saturate()
  • opacity()
  • brightness()
  • contrast()
  • hue-rotate() and
  • invert()

So what is the syntax ?

It is easy -

filter: <filter-function> [<filter-function>];
example - filter: grayscale(100%);

But there’s more to learn.

Let's have few practical examples to better understand the procees.

image without any css filter

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

CSS filter - grayscale

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

CSS filter - blur

.sepia {
-webkit-filter: sepia(90%);
filter: sepia(90%);
}

CSS filter - sepia

.saturate {
-webkit-filter: saturate(7);
filter: saturate(7);
}

CSS filter - saturate

.opacity {
-webkit-filter: opacity(50%);
filter: opacity(50%);
}

CSS filter - opacity

.brightness {
-webkit-filter: brightness(1);
filter: brightness(1);
}

CSS filter - brightness

.contrast {
-webkit-filter: contrast(180%);
filter: contrast(180%);
}

CSS filter - contrast

.hue-rotate {
-webkit-filter: hue-rotate(210deg);
filter: hue-rotate(210deg);
}

CSS filter - hue-rotate

.invert {
-webkit-filter: invert(90%);
filter: invert(90%);
}

CSS filter - invert

.shadow {
-webkit-filter: drop-shadow(8px 8px 5px #000);
filter: drop-shadow(8px 8px 5px #000);
}

CSS filter - shadow

 

Want to know the best part?

We can combine multiple CSS filters altogether and render desired visual. All the filter functions are separated by space and that is all. Easy enough.

CSS multi filter combination