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 | 12 | 53 | 35 | 40 | 9.1 |
Tablets / Mobile | |||||
![]() |
|||||
53 | 53 | 35 | 41 | 9.3 | 6.0 |
Last updated by CSSPortal on: 1st December 2019