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

In this article, You are going to learn How to Drop Shadow on PNG Image Using CSS3 filter:drop-shadow() and text-shadow() and box-shadow:() Filter Property. Without wasting your time, move on to this article.

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

In order to get started, you need to make an index.html file and copy-paste the following code

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>

Final Thoughts

I hope this article helps you to learn How to Drop Shadow on PNG Image Using CSS3 filter:drop-shadow() and text-shadow() and box-shadow:() Filter Property. We will post new CSS and HTML project tutorials as soon as possible so stay tuned with us. Don’t forget to bookmark us.

Share on:

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

Leave a Comment