How to Create a GrayScale Effect using CSS ?

The Grayscale is an effect that provides transition effect from colored image to monochrome image or vice-versa. This effect can be applied to various events like mouse-hover or you can also use a button to activate the effect.

Approach: We will be using the CSS built in function grayscale() to create this effect.

Example 1: First let’s look at transition of colored image to monochrome image. For this we will use grayscale() function in the hover selector. We just set grayscale value to 100% on mouse hover.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>Gray Scale Effect</title>
  
    <style>
        body{
            background: grey;
        }
        img{
            position: absolute;
            top:40%;
            left:50%;
              
            transition:.5s ease-in-out;
        }
      
        img:hover{     
            filter:grayscale(100%);
        }
    </style>
</head>
  
<body>
    <img src=
</body>
  
</html>

chevron_right


Output:

Example 2: Now for a transition from monochrome to the colored image, we will do the reverse process of example 1. We will use the grayscale() function at 100% for the <img> tag and then reduce it to 0% on mouse-hover.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
     <title>Gray Scale Effect</title>
  
    <style>
        body{
            background: grey;
        }
        img{
            position: absolute;
            top:40%;
            left:50%;
            filter:grayscale(100%);
            transition:.5s ease-in-out;
        }
        img:hover{
            filter:grayscale(0%);
        }
    </style>
</head>
   
<body>
    <img src=
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.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.