CSS filter property

CSS filter

CSS filter property, is used to add visual or graphical effects to an element.

This property is mostly used on images.

CSS filter property values are

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

To support filter property on different browsers we need to add some prefixes, they are

  • -webkit- : It supports chrome, safari and new version of opera
  • -moz- : It support Firefox.
  • -o- : Old versions of opera.
  • -ms- : Internet explorer.

filter property is not supported in Edge 12, Internet Explorer, safari 8 and its older browsers.


blur value for css filter property

It is used to add blur effect to the image.

Example

Try Yourself

brightness value for css filter property

It is used to adjust brightness of an image..

Example

Try Yourself

contrast value for css filter property

It is used to adjust contrast of an image.

Example

Try Yourself

drop-shadow value for css filter property

It is used to add shadow effect to the image.

Example

Try Yourself

In the above example values used in drop-shadow are,

10px,23px - h-offset

5px,25 - v-offset

2px,0 - blur

blue - color


grayscale value for css filter property

It is used to convert an ordinary image into grayscale (black & white) image.

Example

Try Yourself

hue-rotate value for css filter property

It is used to apply hue rotation to an image. The value is represented in degree.

Example

Try Yourself

invert value for css filter property

It is used to invert the image.

Values can be given in percentage or 0 to 1 .

Example

Try Yourself

opacity value for css filter property

It is used to set the opacity of an image.

Values can be given in percentage or 0 to 1 .

Example

Try Yourself

saturate value for css filter property

It is used to saturate an image.

Values can be given in percentage or 0 to 1.

Example

Try Yourself

sepia value for css filter property

It is used to convert an ordinary image into sepia image.

Values can be given in percentage or 0 to 1.

Example

Try Yourself