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