grayscale() CSS Function


The CSS grayscale() function converts an image to grayscale. It takes a single parameter, amount, which specifies the amount of grayscale to apply. The value of amount can be a number or a percentage, with 0% representing the original image and 100% representing a completely grayscale image. Values between 0% and 100% produce linear multipliers on the effect.

The grayscale() function can be used to create a variety of effects, such as:

  • Making an image appear black and white
  • Creating a vintage or retro look
  • Adding emphasis to a particular element of an image
  • Subtly desaturating an image to make it more harmonious with its surroundings

To use the grayscale() function, simply add it to the filter property of the element you want to apply the effect to. For example, the following CSS code would convert the image with the ID my-image to grayscale:

#my-image {
  filter: grayscale(100%);

You can also combine the grayscale() function with other filter functions to create more complex effects. For example, the following CSS code would convert the image with the ID my-image to grayscale and then add a slight blur:

#my-image {
  filter: grayscale(100%) blur(1px);

The grayscale() function is supported by all major browsers, including Chrome, Firefox, Edge, and Safari.


grayscale() = grayscale( <number-percentage>? )


  • number-percentagespecified as a <number> or a <percentage>. A value of 100% is completely grayscale, while a value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. The lacuna value for interpolation is 0.


<img class="grayscale" src="images/nature.jpg" alt="Grayscale Example">
<img class="grayscale1" src="images/nature.jpg" alt="Grayscale Example">
.grayscale {
filter: grayscale(1);
.grayscale1 {
filter: grayscale(50%);

Browser Support

The following table will show you the current browser support for the CSS grayscale() function.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 7th October 2023