CSS grayscale() Function

Use the grayscale() function to convert an image to grayscale.

The CSS grayscale() function is used with the filter property to convert an image to grayscale.

The 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.

Using Percentages

Here's an example using a percentage value to make an image completely grayscale:

<style>
  .filtered {
    filter: grayscale(100%);
  }
</style>

<img src="/pix/samples/1s.jpg" alt="Sample image">
<img class="filtered" src="/pix/samples/1s.jpg" alt="Sample image">

Here's an example using a percentage value to make the image partially grayscale:

<style>
  .filtered {
    filter: grayscale(50%);
  }
</style>

<img src="/pix/samples/1s.jpg" alt="Sample image">
<img class="filtered" src="/pix/samples/1s.jpg" alt="Sample image">

Using Numbers

Here's an example using a number:

<style>
  .more {
    filter: grayscale(0.8);
  }
</style>

<img src="/pix/samples/13m.jpg" alt="Sample image">
<img class="more" src="/pix/samples/13m.jpg" alt="Sample image">

Official Syntax

The official syntax of the grayscale() function is as follows:

Possible Values

The grayscale() function accepts a number or 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 1).

A number value of 0.5 has the same effect as the percentage value 50%. A value of 1 is the same as 100%.

Negative values are not allowed.

CSS Specifications

The grayscale() function is defined in Filter Effects Module Level 1 (W3C Working Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.