grayscale()
The grayscale() CSS function converts the input image to grayscale. Its result is a <filter-function>.
Try it
Syntax
css
grayscale(amount)
Parameters
amount-
Amount of the input image that is converted to grayscale. It is specified as a
<number>or a<percentage>. A value of100%changes the input completely to grayscale, while a value of0%leaves the input unchanged. Values between0%and100%have linear multipliers on the effect. If thegrayscale()filter is present with no parameter, the default value is1. The initial value used for interpolation is0.
Examples
Examples of correct values for grayscale()
css
grayscale(0) /* No effect */
grayscale(.7) /* 70% grayscale */
grayscale(100%) /* Completely grayscale */
Specifications
| Specification |
|---|
| Filter Effects Module Level 1 # funcdef-filter-grayscale |
Browser compatibility
| desktop | mobile | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
grayscale() | |||||||||||
See also
The other <filter-function> functions available to be used in values of the filter and backdrop-filter properties include: