Published Jul 12, 2021Updated Sep 3, 2021
Contribute to Docs

Converts an element to grayscale.


filter: grayscale(<value>);

where a required <value> can be one of the following:

  • Number value: 0, .4
  • Percentage value: 100%, 50%

Note: Values of 0 and 0% will leave the image unchanged. Values of 1 and 100% will convert the image to complete grayscale. If a value is omitted, the default value is 1.

Example 1

Give the image a grayscale of 20%:

.banner-image {
filter: grayscale(20%);

All contributors

Looking to contribute?

Learn CSS on Codecademy