Open In App

CSS grayscale() Function

Improve
Improve
Like Article
Like
Save
Share
Report

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.

Syntax:

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.

HTML




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


Output:

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

Last Updated : 03 Nov, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads