Open In App
Related Articles

CSS grayscale() Function

Improve Article
Save Article
Like Article

The grayscale() function in CSS is an inbuilt function that is used to apply a filter to the image to set the grayscale of the image.


grayscale( amount )

Parameters: This function accepts a single parameter amount that holds the value of grayscale. The value of grayscale is set in terms of number and percentage. The value 0% represents the original image while the value between 0% to 100% represents the linear multipliers on the effect.

Example: The below example illustrates the grayscale() function in CSS.


<!DOCTYPE html>
    <title>CSS grayscale() Function</title>
    h1 {
        color: green;
    body {
        text-align: center;
    .grayscale_effect {
        filter: grayscale(100%);
    <h2>CSS grayscale() function</h2>
        <img class="grayscale_effect"
             alt="GeeksforGeeks logo">


Supported Browsers: The browsers supported by the grayscale() function are listed below:

  • Google Chrome 18.0
  • Microsoft Edge 12.0
  • Firefox 35.0
  • Safari 6.0
  • Opera 15.0
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 03 Nov, 2021
Like Article
Save Article
Similar Reads
Complete Tutorials