CSS filter Property

Description

The filter CSS property is used for applying artistic effects to elements.
Typically used for images to blur, increase contrast, convert to black and white, and more.

Need some help with the filter property? If yes, then check out our online CSS Image Filter Generator to see the filter property being used.

Initial value: none
Applies to: All elements
Inherited: No
Media: Visual
Computed value: As specified
Animatable: Yes
CSS Version: CSS1, CSS2, CSS3
JavaScript syntax: object.style.filter

Syntax

filter: <filter-function> [<filter-function>]* | none

Values

blur()Filter for blurring the image. The amount of blur is specified in pixels. If no number is specified, the default is 0.
brightness()The function brightness() dims or brightens images or background pictures.
contrast()The function contrast() decreases or increases the contrast of images or background pictures.
drop-shadow()The function drop-shadow() adds shadow to images. In contrast to the property box-shadow, transparent areas in the image are taken into account and the shadow is cast taking them into account.
grayscale()The function grayscale() turns the image into black and white.
hue-rotate()The hue-rotate() function applies a hue rotation on the input image. The value of angle defines the number of degrees around the color circle the input samples will be adjusted.
invert()The invert() function inverts the samples in the input image. The value of amount defines the proportion of the conversion. A value of 100% is completely inverted. A value of 0% leaves the input unchanged.
opacity()The opacity() function applies transparency to the samples in the input image. The value of amount defines the proportion of the conversion. A value of 0% is completely transparent. A value of 100% leaves the input unchanged.
saturate()The saturate() function saturates the input image. The value of amount defines the proportion of the conversion. A value of 0% is completely un-saturated. A value of 100% leaves the input unchanged.
sepia()The sepia() function 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.
url()A CSS link to an SVG element with a specific #id.

Example

HTML

For examples of all the filter property functions, please check out our <a target="_blank" href="../css-image-filter-generator/">css image filter generator</>

CSS

Result