The <filter-function> CSS data type represents a graphical effect that can change the appearance of an input image. It is used in the filter and backdrop-filter properties.
Syntax
The <filter-function> data type is specified using one of the filter functions listed below. Each function requires an argument which, if invalid, results in no filter being applied.
blur()- Blurs the image.
brightness()- Makes the image brighter or darker.
contrast()- Increases or decreases the image's contrast.
drop-shadow()- Applies a drop shadow behind the image.
grayscale()- Converts the image to grayscale.
hue-rotate()- Changes the overall hue of the image.
invert()- Inverts the colors of the image.
opacity()- Makes the image transparent.
saturate()- Super-saturates or desaturates the input image.
sepia()- Converts the image to sepia.
Specification
| Specification | Status | Comments |
|---|---|---|
| Filter Effects Module Level 1 The definition of '<filter-function>' in that specification. |
Working Draft | Initial definition. |
See also
- Properties that use this data type:
filterandbackdrop-filter