CSS grayscale() Function
grayscale() function to convert an image to grayscale.
grayscale() function is used with the
filter property to convert an image to grayscale.
grayscale() function requires an argument to be passed to it. This argument determines the proportion of the conversion that's applied to the image. The argument can be either a percentage value or a number.
Here's an example using a percentage value to make an image completely grayscale:
Here's an example using a percentage value to make the image partially grayscale:
Here's an example using a number:
The official syntax of the
grayscale() function is as follows:
grayscale() = grayscale( [ <number> | <percentage> ] )
grayscale() function accepts a
<percentage> as its argument. This argument determines the proportion of the conversion.
A value of
100% results in an image that's completely grayscale. A value of
0% results in an image that's unchanged. The specification allows amounts over
100%, but this will have no further effect on the image (i.e. the user agent will clamp it to
<number> value of
0.5 has the same effect as the
50%. A value of
1 is the same as
Negative values are not allowed.
The following table provided by Caniuse.com shows the level of browser support for this feature.