CSS grayscale() Function

img {
  filter: grayscale(1.5);
}

Meaning

The grayscale() css function converts the image to grayscale.

• 0% (0) is default and represents the original image.
• 100% will make the image completely gray, used for black and white images.

Note: Negative values are not allowed.

Version: CSS3

Standard Syntax

grayscale(value)

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Status

Function Arguments

The following table describes the arguments of this function.

See also

The other <filter-function> functions available to be used in values of the filter and backdrop-filter properties include:

• blur()
• brightness()
• contrast()
• drop-shadow()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()