How to Add Shadow to Image in CSS ( 2 Ways )

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

  1. box-shadow is used to add a shadow effect on the entire image or element typically it is rectangular or square-shaped.
  2. It will create a square or rectangular shadow effect around elements like a border.
  3. box-shadow can be applied to HTML elements, such as divs, buttons, images, and more.

drop-shadow

  1. This property can add a shadow effect only on the edges of the element you have added.
  2. 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

.img{
	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 Untitled by Pro Creator (@Pro-Creator-the-sans) 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;

Leave a Comment

Microsoft Outage due to Crowdstrike, Is there users data safe? Whatsapp Released new Feature for Voice note ( Hear once ) Realme UI 5.0 Android 14 update for December month list is released. Wow Infinix Smart 8 HD smartphone only at Rs. 5,999