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
Explorer Edge Chrome Firefox Opera Safari
X125335409.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
535335419.36.0

Last updated by CSSPortal on: 1st December 2019