grayscale() CSS Function

Description

The grayscale() CSS function turns an image into a black and white / grayscale image.

Syntax

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

Values

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

Example

<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

Desktop
X	?	?	?	?	?
Tablets / Mobile
?	53	?	?	?	6.0