CSS filter functions with example

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 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 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%);
}

Blur - 

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

Sepia - 

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

Saturate - 

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

Opacity - 

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

Brightness - 

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

Contrast - 

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

Hue & Rotate - 

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

Invert - 

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

Shadow - 

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

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.