How to Drop Shadow on PNG Image Using CSS3 filter:drop-shadow() and text-shadow() and box-shadow:() Filter Property

You may have read many articles but I hope the How to Drop Shadow on PNG Image Using CSS3 filter:drop-shadow() and text-shadow() and box-shadow:() Filter Property article will satisfy all your doubts. The reason for that is that I have written this article in such a way as to satisfy all your doubts.

The drop-shadow() CSS function applies a drop shadow effect to the input image. Its result is a <filter-function>.

Normal shadow effect will always put a square image shadow to the image, it can not be square or square but the shadow will always be square. Filter: drop-shadow (); And text-shadow (); The property is very pleasing to the eye compared to the box-shadow :() property.

How to Drop Shadow on PNG Image Using CSS3 filter:drop-shadow() and text-shadow() and box-shadow:() Filter Property

How to Drop Shadow on PNG Image Using CSS3 filter:drop-shadow() and text-shadow() and box-shadow:() Filter Property

index.html

<!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=
"https://media.geeksforgeeks.org/wp-content/uploads/20190405213436/left90.png" />
            </p>
        </div>
        
        <div class="Text-shadow">
            <p>Text-shadow
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190405213436/left90.png" />
            </p>
        </div>
        
        <div class="Drop-shadow">
            <p>Drop-shadow
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190405213436/left90.png" />
            </p>
        </div>
    </div>
</body>

</html>

Read Also: How to Flip an Image on Mouse Hover Using Pure CSS3

Final Thoughts

How to Drop Shadow on PNG Image Using CSS3 filter:drop-shadow() and text-shadow() and box-shadow:() Filter Property We hope all your doubts have been resolved through this article. Also if you need any information you can let us know your doubts in the comment box.

Hi, I'm Ranjith a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Deekshi. Here, I post about programming to help developers.

Share on:

Leave a Comment