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

 

 

 

Welcome folks today in this blog post we will be dropping shadow on png image using css3.All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

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>

Leave a Reply