dropshadowfilter

A drop shadow filter is a graphical effect that adds a shadow to an object, typically offset and blurred, to convey depth and separation from the background. It is used in vector and bitmap graphics, as well as in user interfaces and web content, to improve legibility and visual hierarchy.

In SVG, a drop shadow is implemented as a filter primitive, most commonly the feDropShadow element. This effect creates a blurred, offset copy of the source image’s alpha channel, then composites it with the original. The appearance is controlled by parameters such as horizontal and vertical offset, blur radius, and the color or opacity of the shadow. The result can follow irregular shapes and remains independent of the document’s layout, enabling shadows for complex graphics and text.

In CSS, the drop-shadow filter is applied as a filter function on elements, for example to add a colored, blurred shadow to images, icons, or text. It differs from the box-shadow property in that it operates on the element’s alpha channel, making it capable of following non-rectangular silhouettes. Drop shadows are widely supported in modern browsers, though rendering can vary with assets that include transparency.

Performance considerations include the computational cost of blurring and compositing, especially for large or animated scenes. Excessive blur, large filter regions, or complex shadows can impact rendering performance. Best practices include limiting blur radius, using precomposed images when possible, and applying the effect only to appropriately sized areas.