Using a filter drop shadow for transparent images
Filter Drop Shadow vs Box Shadow in CSS with examples
Filter Drop Shadow in CSS
The filter drop-shadow CSS property is used to add a drop shadow to an element. The drop-shadow is applied to the element's first child. The property accepts a comma-separated list of shadows, each specified by 2-4 length values and an optional color.
The x-coordinate of the drop shadow. A positive value places the shadow to the right of the element, a negative value places the shadow to the left of the element.
The y-coordinate of the drop shadow. A positive value places the shadow below the element, a negative value places the shadow above the element.
The blur radius of the drop shadow. A larger value produces a more blurred shadow.
The color of the drop shadow. If not specified, the shadow is not visible.
About box Shadow in CSS
Box-shadow is aCSS property that allows us to add shadows to elements. The box-shadow property takes values for the horizontal offset, the vertical offset, the blur radius, the spread radius, and the color of the shadow.
We can use the box-shadow property to create shadows of different sizes, colors, and shapes. We can also use it to create inset shadows and glow effects.
Filter Drop Shadow and Transparent Images
You can see in the demo below that the filter drop shadow applies to the transparent parts of the image, and the box shadow only applies around the outside of the image. So for rounded or transparent elements the filter drop shadow is usually better.
Filter Drop Shadow
Box Shadow Example
Using a filter drop shadow for transparent images Demo
View Demo Full Screen View Demo New Tab
Using a filter drop shadow for transparent images Code
HTML
<h2>Filter Drop Shadow</h2>
<img src="https://i.imgur.com/kD1Caxq.png" class="filter-drop-shadow">
<hr>
<h2>Box Shadow</h2>
<img src="https://i.imgur.com/kD1Caxq.png" class="box-shadow">
CSS
.filter-drop-shadow {
filter: drop-shadow(4px 8px 12px #EEE);
}
.box-shadow {
box-shadow: 4px 8px 12px #EEE;
}