CSS Filter Property

CSS Filter Property
CSS filter property is CSS3 version using this you can change the image graphical effect on the source image you no need to use another edited image. Using this property you can apply the different style of effect in the source image. Like opacity, grace scale, blur, contrast, brightness, drop shadow, saturate, invert etc.

What is the property of the Filter?

  • None
  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url()

Syntax:
img{
 filter: blur(10px);
}


Explanation of Each Property Value:

Blur – Apply a blur effect to the image.

Brightness – Adjust the brightness of the image. A value of 0% will create an image that is completely black.

Contrast – Adjust the contrast of the image. A value of 0% will create an image that is completely gray. A value of 100% leaves the input unchanged.

DropShadow – Apply a drop shadow effect to the image.A drop shadow is effectively a blurred, offset version of the input image's alpha mask drawn in a particular color, composited below the image.

GrayScale – Convert the image to grayscale.

Hue Rotate – Apply a hue rotation on the image.

Invert – Inverts the samples in the input image. The value of amount defines the proportion of the conversion.

Opacity – Set the opacity level of the image. The value will be from 0 to 100%.

Saturate – Saturate the image.A value of 0% is completely unsaturated. A value of 100% leaves the input unchanged.

Sepia - Converts the input image to sepia. The value of amount defines the proportion of the conversion. A value of 100% is completely sepia. A value of 0% leaves the input unchanged.

Example:




Feature Chrome Firefox IE Opera Safari
Basic support 53.0, 18.0 -webkit- 35.0+ 13.o 40.0+ 9.1, 6.0 -webkit-
Copyright Labw3