Table of Contents
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
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.