How Can I Create a Drop Shadow for Irregular PNG Images in CSS?

Applying Drop Shadow to Irregular PNG Images in CSS

Creating a drop shadow effect for a PNG image with an irregular shape can present a challenge using the standard CSS box-shadow property. This is because box-shadow adds a square-shaped shadow around the image, which doesn't conform to the shape of the object in the image.

Solution: Using the CSS filter Property

To add a drop shadow to an irregularly shaped PNG image, we can use the CSS filter property with the dropShadow() function. This function takes four parameters: x-offset, y-offset, blur-radius, and color.

Example Code

Here's an example of how to apply a drop shadow using the dropShadow() function:

img {
  width: 150px;
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}

In this example, we're applying a drop shadow with a 5px offset in both the x and y directions, a 5px blur radius, and a black color (#222).

Inline Styling

You can also apply the drop shadow inline, using the style attribute:

<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png"
style="-webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222);">

Using the dropShadow() function allows you to create a drop shadow that accurately follows the shape of the PNG image, providing a more visually appealing and realistic effect.

The above is the detailed content of How Can I Create a Drop Shadow for Irregular PNG Images in CSS?. For more information, please follow other related articles on the PHP Chinese website!