Drop shadow for PNG image using CSS

There is a basic way to add shadow effect on images but that effect will behave like the image is square, so there is another way to do the shadow which is basically applied on PNG images. The normal shadow effect will always put a square image shadow for the image which can be squared or cannot be squared but the shadow will be always square. filter:drop-shadow(); and text-shadow(); property is more eye pleasant compare to box-shadow:() property.

Syntax:

filter: drop-shadow();

Example 1: This example uses filter: drop-shadow() property to add shadow effect on pngimage.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
      
    <!-- CSS style to add shadow -->
    <style>
        img {
            filter: drop-shadow(5px 5px 5px #222);
            width:200px;
            height:220px;
        }
    </style>
</head>
  
<body style="text-align:center;">
    <h3>Drop shadow effect on png</h3>
    <img src=
</body>
  
</html>                                  

chevron_right


Output:

Example 2: This example differentiate between filter:drop-shadow();, text-shadow(); and box-shadow:(); property.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
      
<head
    <style
        img {
            width:120px;
        }
        .Box-shadow {
            float:left;
            box-shadow:2px 2px 2px gray;
        }
          
        .Text-shadow {
            float:right;
            text-shadow:2px 2px 2px gray;
        }
        .Drop-shadow {
            float:right;
        }
        .Drop-shadow img {
            filter:drop-shadow(2px 2px 2px gray);
        }
    </style
</head
  
<body
  
    <div class = "images"
        <div class="Box-shadow">
            <p>Box-shadow
                <img src=
            </p>
        </div>
          
        <div class="Text-shadow">
            <p>Text-shadow
                <img src=
            </p>
        </div>
          
        <div class="Drop-shadow">
            <p>Drop-shadow
                <img src=
            </p
        </div>
    </div
</body
  
</html>                                                    

chevron_right


Output:



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.