CSS filter property

Property values

noneDefault

No filter is applied to the element.

filter: none;

blur(+ve length)

It applies blur to an element.

It accepts only length value and not percentage value.

filter: blur(10px);

brightness(+ve-length or +ve-percentage)

It determines the brightness of an element. 100% or 1 value does not affect the element while other values within the range (0-1 or 0%-100%) show an effect.

filter: brightness(50%);

contrast(+ve-length or +ve-percentage)

It defines the contrast behavior of content. 100% value does not affect while the other values within the range (0-1 or 0%-100%) show a contrast behavior. 0% values show fully grayscale.

filter: contrast(50%);

drop-shadow(X-offset Y-offset blur-radius color)

It applies drop-shadow to the box (element). The parameter consists of horizontal-offset, vertical-offset, blur-radius, and color of the shadow.

filter: drop-shadow(5px 5px 5px rgba(230,230,230,1));

grayscale(+ve-length or +ve-percentage)

It converts an element into grayscale. 100% value means full grayscale.

filter: grayscale(50%);

hue-rotate(angle)

It represents huge rotation on the element. Actually, the parameter defines the number of degrees around the color circle to which the samle colors will be adjusted.

filter: hue-rotate(30deg);

invert(+ve-length or +ve-percentage)

It completely inverts the sample of the element. The argument value defines the proportion of conversion. 0% does not affect the element. While 100% completely inverts the element.

filter: invert(50%);

opacity(+ve-length or +ve-percentage)

It represents transparency of the object (element). 0% or 0 is fully opaque. And 100% or 1 is fully transparent.

filter: opacity(60%);

sepia(+ve-length or +ve-percentage)

converts an input element or image to sepia. Values vary between 0% (0) and 100% (1).

filter: sepia(30%);