How to apply colored shadow and border properties to a grayscale image?

Last Updated : 22 Jul, 2020

There is a very simple method of applying the grayscale effect to an image. Using the filter() property, we can apply grayscale effect to any HTML element. When we apply a colored box-shadow to an image having a grayscale property, the shadow turns grayscale too. For example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        #logo { 
            width: 200px; 
            height: auto; 
            z-index: none; 
            filter: grayscale(100%); 
            border: 1px solid black; 
            box-shadow: 0px 0px 20px 10px green; 
        } 
  
        .center { 
            margin: 0 auto; 
            text-align: center; 
            justify-content: center; 
        } 
    </style> 
</head> 
  
<body class="center"> 
    <br /><br /><br /> 
    <div id="logo-shadow"> 
        <img id="logo" src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200618233603/gfg3.png" /> 
    </div> 
</body> 
  
</html>

Output:

You can observe that in the CSS, the shadow is defined for the green color, but it appears grayscale.

This can be prevented by wrapping the image and applying shadow properties to the wrapper division. For example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        #logo { 
            width: 200px; 
            height: auto; 
            z-index: none; 
            filter: grayscale(100%); 
            transition: filter 1s, border-radius 1s; 
        } 
  
        #logo-shadow { 
            display: inline-block; 
            border: 1px solid black; 
            box-shadow: 0px 0px 20px 10px green; 
            transition: border-radius 1s; 
        } 
  
        .center { 
            margin: 0 auto; 
            text-align: center; 
            justify-content: center; 
        } 
    </style> 
</head> 
  
<body class="center"> 
      <br /><br /><br /> 
    <div id="logo-shadow"> 
        <img id="logo" src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200618233603/gfg3.png" /> 
    </div> 
</body> 
  
</html>

Output: Now,It can be observed that the shadow is colored, while the image is still grayscale.

You can create some more interesting CSS effects using a combination of these three properties (grayscale(), box-shadow, border). Some examples are shown below:

Example 1: You can transform button #1 into button #2 on hovering with the mouse pointer, using the code below.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        #logo { 
            width: 200px; 
            height: auto; 
            z-index: none; 
            filter: grayscale(100%); 
            transition: filter 1s, border-radius 1s; 
        } 
  
        #logo-shadow { 
            display: inline-block; 
            border: 1px solid black; 
            box-shadow: 0px 0px 20px 10px green; 
            transition: border-radius 1s; 
        } 
  
        #logo:hover { 
            border-radius: 50px; 
            filter: unset; 
        } 
  
        #logo-shadow:hover { 
            border-radius: 50px; 
            border: none; 
        } 
  
        .center { 
            margin: 0 auto; 
            text-align: center; 
            justify-content: center; 
        } 
    </style> 
</head> 
  
<body class="center"> 
    <br /><br /><br /> 
    <div id="logo-shadow"> 
        <img id="logo" src="index.png" /> 
    </div> 
</body> 
  
</html>

Output:

Example 2: You can also transform PNG images into distinguished buttons using these effects. These effects are predominately used to create a 3D perspective and minimal view.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>GFG Article</title> 
    <style> 
        #logo2 { 
            display: inline-block; 
            height: auto; 
            z-index: none; 
            filter: drop-shadow(-2px -2px 5px #212121); 
            transition: filter 1s, box-shadow 1s, border-radius 1s; 
        } 
  
        #logo2:hover { 
            filter: unset; 
            border-radius: 30px; 
            box-shadow: 0px 0px 5px 2px green; 
        } 
  
        .center { 
            margin: 0 auto; 
            text-align: center; 
            justify-content: center; 
        } 
    </style> 
</head> 
  
<body class="center"> 
    <br /><br /> 
    <div> 
        <img id="logo2" src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200721001503/geeksforgeeks-6.png" /> 
    </div> 
</body> 
  
</html>