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:

filter-browsersupport

Blur

It is used to apply blur effect to any element.

For example:
HTML:

CSS:

filter1

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:

filter2

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:

filter3

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:

filter4

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:

filter5

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:

filter6

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:

filter7

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:

filter8

Saturate

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

For example:
CSS:

filter9

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:

filter10

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

CSS:

filter11

Conclusion

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

mm

Priya Patel Jr. Web Designer

I am a Web Designer at Yudiz Solutions Pvt. Ltd - a leading Web and Mobile Apps development company. In my free time I learn new things about latest web design tools and techniques.

Comments are closed.

Top