Drop Shadow for PNG Image in CSS

A shadow is utilized for setting the position relative to the object and size. In web development, users can add multiple shadow effects around the text, image, container, table, and many more. Thanks to shadowing effects, audiences can acknowledge the geometric features of a complicated recipient. These effects can also remove ambiguity from the objects.

This post will examine how to drop a shadow for a PNG image in CSS.

How to Drop Shadow for PNG Image in CSS?

To drop the shadow for a PNG image in CSS, the “filter” CSS property is utilized. The “filter” property determines the visual and graphical effects like blur, shadow, or color shift to an element. More specifically, filters are commonly used to adjust the rendering for an element.

For the purpose of dropping the shadow for a PNG, check out the provided instructions.

Step 1: Make a “div” Container

First, make a div container by using the “<div>” tag. Also, insert a class attribute inside the div opening tag and specify a particular name for the class.

Step 2: Add Image

Next, add an image with the help of the “<img>” tag and add the following attributes inside the “img” tag:

“src” attribute is utilized for inserting a media file inside the element.
“width” determines the element’s width size.
“height” is used for setting the height of the defined element:

It can be observed that the PNG image has been added successfully:

Step 3: Drop Shadow for PNG Image

Access the “div” container with the help of the assigned class name and class selector as “.img-container”. Then, apply the below-stated properties:

.img-container{

filter: drop-shadow(5px 8px 9px rgb(42, 116, 126));

margin: 60px;

padding: 30px;

border: 3px dotted green;

height: 200px;

width: 300px;

}

Here:

The CSS “filter” property is used to add the visual and graphical effect on the element. To do so, the value of this property is set as “drop-shadow()” for adding the shadow around the defined element.
“drop-shadow” property attaches one or more shadows to an element. This property is most similar to the “box-shadow” CSS property.
“margin” determines the blank space around the element’s outer side of the defined boundary.
“padding” is used to insert space around the defined element inside the boundary.
“border” is utilized for specifying the boundary around the element.
The “width” and “height” determine the size of the container.

As a result, the shadow will be added around the PNG image:

That was all about dropping shadows for PNG images in CSS.

Conclusion

To drop the shadow for the PNG image in CSS, first, create a div container by using the <div> tag. Next, add an image with the “<img>” tag. Then, access the element in CSS and apply the “filter” CSS property used to specify the visual effect around the element. To do so, set the value of this property as “drop-shadow” to add a shadow around the defined element. This write-up has demonstrated the method for dropping the shadow for a PNG image in CSS.