CSS filter functions allow to adjust the color of an element before it is rendered on the site.

For instance, we all know how much time is consumed in converting an image into grayscale using Photoshop or making a sprite image which toggles css-filter-functions-with-exampleon 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 web pages as well. 

So, here are the basics - with CSS filters we can do all those extensive time taking task easily whether 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 any additonal tool.

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 - 
    .class{ filter: grayscale(100%); }

But there’s more to learn.

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

 

Grayscale - 

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

CSS filter - grayscale

 

Blur - 

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

CSS filter - blur

 

Sepia - 

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

CSS filter - sepia

 

Saturate - 

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

CSS filter - saturate

 

Opacity - 

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

CSS filter - opacity

 

Brightness - 

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

CSS filter - brightness

 

Contrast - 

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

CSS filter - contrast

 

Hue & Rotate - 

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

CSS filter - hue-rotate

 

Invert - 

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

CSS filter - invert

 

Shadow - 

.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