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.
brightness value for css filter property
It is used to adjust brightness of an image..
contrast value for css filter property
It is used to adjust contrast of an image.
drop-shadow value for css filter property
It is used to add shadow effect to the image.
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.
hue-rotate value for css filter property
It is used to apply hue rotation to an image. The value is represented in degree.
invert value for css filter property
It is used to invert the image.
Values can be given in percentage or 0 to 1 .
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 .
saturate value for css filter property
It is used to saturate an image.
Values can be given in percentage or 0 to 1.
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.