CSS filter property

Property values

noneDefault

No filter is applied to the element.

filter: none;

Try it { }

blur(+ve length)

10

It applies blur to an element.

It accepts only length value and not percentage value.

filter: blur(10px);

Try it { }

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

50

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%);

Try it { }

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

50

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%);

Try it { }

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));

Try it { }

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

50

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

filter: grayscale(50%);

Try it { }

hue-rotate(angle)

30

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);

Try it { }

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

50

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%);

Try it { }

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

60

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

filter: opacity(60%);

Try it { }

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

30

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

filter: sepia(30%);

Try it { }