Q: How many shadow layers should I stack?
CSS itself has no hard limit, but 2 to 4 layers cover almost every realistic depth effect. An ambient + key pair handles most cards and buttons; adding a third tight contact shadow grounds hero elements. Beyond 4 layers you are paying paint cost without adding visual difference — most users cannot distinguish a 5-layer shadow from a 3-layer one.
Q: Why does my shadow look pixelated on hover animations?
Large blur radii re-rasterize on every animation frame. Add will-change: transform to the animated element so the browser promotes it to a separate compositor layer. The shadow then renders once and the layer is just translated each frame, which fixes both the pixelation and the jank.
Q: Should I use box-shadow or filter: drop-shadow?
Use box-shadow for rectangular elements (cards, buttons, modals). Use drop-shadow when the element has transparent regions you want the shadow to follow — typically SVG icons, transparent PNGs, or shapes built with clip-path. Drop-shadow costs more, so do not reach for it by default.
Q: My shadow disappears in dark mode. What now?
Dark shadows on dark backgrounds wash out. The two common fixes: bump the shadow alpha to 0.3–0.5 and increase blur, or invert the approach and use a subtle light-colored outer glow (e.g. rgba(255,255,255,0.05)) to suggest elevation. Some design systems define separate shadow tokens per theme rather than reusing the light-mode values.
Q: What does negative spread do?
Negative spread shrinks the shadow before the blur is applied. The classic use case is a tight inner glow that does not extend past the element's edges. For example, 0 4px 6px -2px rgba(0,0,0,0.3) creates a shadow that only shows under the element instead of fanning out on all sides — handy for floating action buttons.
Q: Can I animate box-shadow smoothly?
Yes, but animating box-shadow directly forces a paint on every frame. For smooth hover effects, pre-render the larger shadow on a pseudo-element with opacity: 0 and animate the opacity instead. The shadow is rasterized once, and animating opacity is GPU-cheap.