CSS filter function with example

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

Though these CSS filter functions are mostly used for the images but can be used for any other elements.

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 or vice versa and adjusting saturation, or applying correct filters and blurring images, etc. 

Thanks to CSS filter functions, we can do all those extensive time-taking tasks easily for images, DOM elements, and even videos. We can easily blur, turn an image into grayscale, set hue, saturation, contrast, and invert, etc. with few lines of CSS code without using any additional tool.

So the question is how to do it?

Well before start applying filters, let's see all the available CSS filter functions -

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

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 a few practical examples to better understand the process. Below is the original image without any filter applied to it.

Now let's apply each CSS filter and see the output. 

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

drop-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 the desired visual. All the filter functions are separated by space and that is all. Easy enough.

.multiple-filter {
    filter: blur(10px) grayscale(20%)drop-shadow(8px 8px 5px #ddd)
}

No filter

.no-filter {
    filter: none;
}