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:
filter
andbackdrop-filter