How to use filter property of CSS3?

Overview

The filter property is used to add visual effect to any element. Its default value is none. You can use multiple filters for any element separated by space.

Browser Support: It is fully supported in first version mentioned in the below table:

Blur

It is used to apply blur effect to any element.

For example:
HTML:

<div class="block">
     <h3>Blur</h3>
     <img alt="" src="image.jpg" width="400">
</div>

CSS:

.block       { margin: 60px; padding: 20px; background: #fff; box-shadow: 0 0 5px #000; display: inline-block; }
h3           { margin: 0 0 15px; padding-bottom: 5px; font-size: 22px; border-bottom: 1px solid #000; }
.block img   { filter: blur(5px); -webkit-filter: blur(5px); }

Brightness

It is used to apply brightness to any element. When we set it to 0 then whole element will turn out to be black and default value is 1 or 100% which is the original element.

For Example:
CSS:

.block img { filter: brightness(50%); -webkit-filter: brightness(50%); }

Contrast

It is used to adjust the contrast level of the element. When we set it to 0 then whole element will turn out to be gray and default value is 1 or 100% which is the original element.

For example:
CSS:

.block img { filter: contrast(150%); -webkit-filter: contrast(150%); }

Drop Shadow

It applies drop shadow effect to the element similar to box-shadow property. Unlike box-shadow property, it is applied to actual outline of the object. Syntax for drop-shadow as below:
Drop shadow: h-shadow v-shadow blur spread color

Here,
h-shadow(required): It represents the value of horizontal shadow. Negative value can be used and if it is used as shadow, it will be shown to the left of the element.

v-shadow(required): It represents the value of vertical shadow. Similarly to h-shadow, negative values can be used here too but it will display shadow on the top of the element.

blur(optional): This adds blur effect to the shadow.

spread(optional): It is generally used to expand the shadow but as many browser does not support so it is better to avoid its usage.

color(optional): It is used to specify the color of the shadow. If it is not specified it will render the default color based on the browser but mostly it is black.

For example:
CSS:

.block img { filter: drop-shadow(-8px 12px 2px #ddd); -webkit-filter: drop-shadow(-8px 12px 2px #ddd); }

Gray Scale

This is used to convert the element into grayscale. When it is set to 0, it displays the original element and when it is set to 100% then it will display element with gray effect. Negative values are not allowed.

For example:
CSS:

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

Hue Rotate

It is used to apply hue rotation on the image. The value is specified in deg and maximum value is 360deg. When value is set to 0, the image remains unchanged.

For example:
CSS:

.block img { filter: hue-rotate(150deg); -webkit-filter: hue-rotate(150deg); }

Invert

It inverts the sample in the image. When it is set to 100% then image will be completely inverted and when it is set to 0 then image will remain unchanged.
Negative values are not allowed.

For example:
CSS:

.block img { filter: invert(100%); -webkit-filter: invert(100%); }

Opacity

It applies opacity level to the element and it is similar to opacity css property. It also does not accept negative value. When set to 0, then it changes to completely transparent.

For example:
CSS:

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

Saturate

This property saturates the image. Negative values are not allowed. When set to 0, then image is completely saturated.

For example:
CSS:

.block img { filter: saturate(60%); -webkit-filter: saturate(60%); }

Sepia

It converts the element into sepia. Negative values are not allowed. Default value is 0 which represents the original image and 100% will change the image completely to sepia.

For example:
CSS:

.block img { filter: sepia(80%); -webkit-filter: sepia(80%); }

Url

This takes the location of the xml file that specifies the svg filter and may include the anchor to specific filter.

For example:
HTML:
Add the below code to body of above HTML

<svg>
    <filter id="blur">
        <feGaussianBlur stdDeviation="2" />
    </filter>
</svg>

CSS:

.block img { filter: url(#blur); -webkit-filter: url(#blur);  }

Conclusion

I hope this blog might help you in having clear idea about the filter property of CSS3.