The grayscale() function is an inbuilt function which is used to apply a filter to the image to set the grayscale of the image.
grayscale( amount )
Parameters: This function accepts single parameter amount which holds the value of grayscale. The value of grayscale is set in terms of number and percentage. The value 0% represents original image while the value in between 0% to 100% represents the linear multipliers on the effect.
Below example illustrates the grayscale() function in CSS:
Supported Browsers: The browsers supported by grayscale() function are listed below:
- Google Chrome
- Internet Explorer
- Convert an image into grayscale image using HTML/CSS
- How to Create a GrayScale Effect using CSS ?
- How to apply colored shadow and border properties to a grayscale image?
- How to override the CSS properties of a class using another CSS class ?
- Difference between bootstrap.css and bootstrap-theme.css
- CSS | rgb() Function
- CSS | rgba() Function
- CSS | hsla() Function
- CSS | hsl() Function
- CSS | cubic-bezier() Function
- CSS | calc() Function
- CSS | attr() Function
- CSS | linear-gradient() Function
- CSS | radial-gradient() Function
- CSS | repeating-radial-gradient() Function
- CSS | repeating-linear-gradient() Function
- CSS | animation-timing-function Property
- CSS | var() Function
- CSS | brightness() Function
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.