CSS Drop Shadow Generator
Note: A filter promotes the element to its own compositing layer and re-renders it on every repaint. Harmless on a static logo; the first thing to remove when an animation that should be smooth starts dropping frames.
The practical cases are transparent PNGs, inline SVG icons, elements you have cut with clip-path, and pseudo-element shapes like speech-bubble tails, which box-shadow cannot see at all. It also applies through a whole subtree, so one drop-shadow on a wrapper shadows a composed icon as a single object rather than shadowing each part separately.
What you give up is the spread radius. drop-shadow takes an x offset, a y offset, a blur and a colour, and that is all — there is no fifth value and no inset variant. If you need a tight, spread shadow, box-shadow is still the tool. What you can do instead is stack two drop-shadows in one filter, which composes them rather than drawing them side by side, and is how a soft outer glow plus a tight contact shadow is built.
The cost is real: this is a filter, so it forces the element onto its own compositing layer and is recalculated whenever the element repaints. On a static logo that is free. Applied to something animating at sixty frames a second, it is the first thing to check when the animation stutters.
Frequently Asked Questions
When should I use drop-shadow instead of box-shadow?
Whenever the element's visible shape is not its box: transparent PNGs, SVG icons, anything cut with clip-path or a mask, and pseudo-element decorations. For a plain card or button, box-shadow is cheaper and gives you the spread radius as well.
Why can I not set a spread radius?
Because the filter function does not define one — it takes offset-x, offset-y, blur-radius and colour only. To fake a spread, stack two drop-shadows with the same offsets and different blurs inside one filter declaration; they compose into a denser shadow.
Does this work on a background image?
Not on the background alone. A filter applies to the whole element including its content, so shadowing a background image means the text inside gets a shadow too. Put the image in its own element, or use an img tag, and apply the filter there.
Is drop-shadow slow?
It is more expensive than box-shadow because it promotes the element to its own compositing layer and re-renders on every repaint. That is irrelevant for a static logo and very relevant for something transforming continuously — if a smooth animation starts dropping frames, a filter on the animated element is a likely cause.
