Abakada: Back to Basics > Language References > CSS Properties > Filter Functions > Grayscale Filter Effect
Renders an input image in grayscale mode.
{ filter: grayscale(number | percentage) }
| number |
Absolute positive floating-point number or a relative percentage value. |
The property is read/write with a default value of 1.
The grayscale( ) CSS function renders a visual object as a grayscale data type, converting the element’s colors to monochromatic shades of gray.
drops the color information from a visual object’s color palette, rendering the object as a grayscale data type.
The passed parameter defines the amount of deviation from the element’s default color palette.
A value of 0 or 0% leaves the input unchanged, while a value of 1 or 100% changes the input image completely to grayscale.
Values between 0 and 1 or 0% and 100% have linear multipliers on the effect.
Values more than 1 ( or >100% ) are ignored and render as 1 or 100%.
Negative values are ignored and render the element unchanged.
Grayscale with values between 0 and 1 or between 0% and 100%.
filter: grayscale(0) |
filter: grayscale(.25) |
filter: grayscale(.75) |
 |
|
|
| |
filter: grayscale(30%) |
filter: grayscale(60%) |
filter: grayscale(100%) |
|
|
|
Grayscale with a negative value or with a value more than 1 or more than 100%.
filter: grayscale(-1) |
filter: grayscale(10) |
filter: grayscale(150%) |
|
|
|
hue-rotate invert opacity saturate sepia