filter property

Specifies a visual effect on an element using filter functions like grayscale, sepia, blur, etc.

Syntax

filter: none | <filter-function-list>

Property values

none

No filter effect is applied

filter-function-list

A list of filter functions from the table below. Applied in the order provided.

Value	Meaning
blur() = blur( <length> )	Applies a Gaussian blur to the element where <length>, the radius, specifies the value of standard deviation to the Gaussian function. The larger the <length>, the larger the blur. Negative values are not allowed.
brightness() = brightness( [number] | [percentage] )	Applies a linear multiplier to the element making the element look brighter or darker. Setting the value to 100% will leave the element unchanged. Setting the value to 0% will make the element completely black. Negative values are not allowed. Values greater than 100% are allowed and will result in a brighter element.
contrast() = contrast( [number] | [percentage] )	Adjusts the contrast of the element. Setting the value to 100% will leave the element unchanged. Setting the value to 0% will create an element that is completely gray. Negative values are not allowed.
drop-shadow() = drop-shadow( <length>{2,3}<color>? )	Applies a drop-shadow effect to the element. These values are interpreted the same as the box-shadow property values.
grayscale() = grayscale( [number] | [percentage] )	Converts the element to grayscale. Setting the value to 100% makes the element completely grayscale. Setting the value to 0% will leave the element unchanged. Negative values are not allowed.
hue-rotate() = hue-rotate( <angle> )	Applies a hue rotation on the element. The value for <angle> specifies the number of degrees around the color circle the input samples will be adjusted. Setting the value to 0deg will leave the element unchanged.
invert() = invert( [number] | [percentage] )	Inverts the samples in the element. The value defines the proportion of the conversion. Setting the value to 100% completely inverts the image. Setting the value you 0% leaves the element unchanged. Values greater than 100% are allowed.
opacity() = opacity( [number] | [percentage] )	Applies transparency to the samples in the element. Setting the value to 0% makes the element completely transparent. Setting the value you 100% leaves the element unchanged. Values greater than 100% are allowed.
saturate() = saturate( [number] | [percentage] )	Saturates the element. A value of 0% is completely un-saturated. A value of 100% leaves the element unchanged. Negative values are not allowed. Values greater than 100% are allowed.
sepia() = sepia( [number] | [percentage] )	Converts the element to sepia. Setting a value of 100% converts the element to completely sepia. Setting a value of 0% leaves the element unchanged. Negative values are not allowed.

CSS information

Remarks

Multiple filters can be applied on top of one another by space-separating the values.

The named filter functions can be animated with CSS Animations and Transitions. Multiple filters can be animated simultaneously.

See also

CSSStyleDeclaration