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