Hey, Coders, I hope you are doing well and good. If you are searching for How to Add Shadow to an Image in CSS? then you are at the right place. Here is the complete tutorial to add Shadow Effect on the image (Shadow effect on PNG image ).
There are two ways to add shadows first way is by using the box-shadow property and the second way is by using the drop-shadow property.
Now these both properties have different function as explained below.
box-shadow
- box-shadow is used to add a shadow effect on the entire image or element typically it is rectangular or square-shaped.
- It will create a square or rectangular shadow effect around elements like a border.
- box-shadow can be applied to HTML elements, such as divs, buttons, images, and more.
drop-shadow
- This property can add a shadow effect only on the edges of the element you have added.
- For example, if you have added a PNG image with cutouts then the shadow effect will be added to the cut-out edges only.
Check the below image to get more clarification
How to Add Shadow Effect to Image in CSS
There are two methods to add shadow effect on an image as shown below-
HTML
<!DOCTYPE html>
<html>
<div class="img">
<img class="img1" src="https://pngimg.com/uploads/ironman/ironman_PNG66.png"></img>
<img class="img2"src="https://pngimg.com/uploads/ironman/ironman_PNG66.png"></img>
</div>
</html>CSS
.container{
height: 500px;
display: flex;
gap: 30px;
}
.img1{
filter: drop-shadow(15px 15px 10px black );
}
.img2{
box-shadow: 20px 20px 20px black;
}Compile HTML, and CSS code here
See the Pen Code Snippets with Copy Button by Faraz (@codewithfaraz) on CodePen.
Output
Explanation
The first image in this code is filtered with the drop-shadow property to get the exact shadow effect on the edges of the image only.
filter: drop-shadow(15px 15px 10px black );Code Explained
filter : This is a CSS property used to apply effects to an element, such as blur, brightness, contrast, and in this case, a drop shadow.
drop-shadow : Used to create a drop-shadow effect
15px : This value determines the horizontal offset of the shadow.
15px : Next value determines the vertical offset of the shadow.
black: This value specifies the color of the shadow.
In the second image, we have used the box-shadow effect to get a shadow effect on the edges of the element box.
box-shadow: 20px 20px 20px black;Code Explained
box-shadow: it is a CSS property used to add a shadow effect to an element, such as a box or a container.
20px: This value determines the horizontal offset of the shadow.
20px: The next value determines the vertical offset of the shadow.
20px: The next value determines the blurness of the shadow.
black: This value specifies the color of the shadow.
Conclusion
In this way, shadow effects can be added to images / PNG / Elements in CSS and HTML.
FAQ
How to Add Shadow effect to image CSS?
Shadow effect can be added by using “filter: drop-shadow” and “box-shadow” property.
How to change the Shadow color in CSS?
Change the color value as required. Ex – box-shadow: 20px 20px 20px black;