How Can I Create CSS Drop Shadows for Non-Square PNG Images?

CSS Drop Shadow Effects for Non-Square PNG Images

Creating a drop shadow effect for non-square PNG images using CSS can be tricky. The standard approach of using the box-shadow property results in a square shadow that doesn't follow the contours of the image.

Fortunately, there's a solution using the filter property:

Using filter: dropShadow()

The filter: dropShadow() property allows you to create a blurred shadow effect with custom offsets and color:

filter: drop-shadow(x y blur color);

where:

• x and y represent the horizontal and vertical offsets of the shadow
• blur determines the blur radius of the shadow
• color is the shadow color

CSS Example:

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

Inline Example:

<img src="image.png">

This technique enables you to create drop shadow effects that accurately follow the shape of non-square PNG images, giving them a realistic depth and dimension.

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