Box Shadow Generator: Frequently Asked Questions

box-shadow always creates a rectangular shadow matching the element's border-box, ignoring transparency. filter: drop-shadow() follows the element's actual shape including transparent areas — so it works on irregular PNG images. box-shadow is faster and more predictable for standard UI elements.

For text shadows, use the text-shadow property instead: text-shadow: 1px 1px 2px rgba(0,0,0,0.3). It takes x-offset, y-offset, blur-radius, and colour — similar to box-shadow but without spread-radius and without the inset keyword.

There is no hard browser limit on the number of shadows in a comma-separated list. Performance degrades with many layers. In practice, 2–3 layered shadows are enough to create any realistic depth effect. More than 5 shadows on a single element is unusual.

A negative spread radius makes the shadow smaller than the element. This is useful for creating shadows that appear to come from behind the element rather than extending beyond it — a technique for making elements look like they are floating above the page with light hitting only the edges.

Use a shadow with 0 offset and a coloured semi-transparent value: box-shadow: 0 0 20px rgba(99,102,241,0.5). This creates an even glow around the element. Increase the blur and spread for a softer, larger glow. Inset glows work the same way with the inset keyword.

No — CSS box-shadow colour must be a single colour value. You cannot use a gradient. For gradient shadow effects, some workarounds exist using pseudo-elements with gradient backgrounds and blur filters, but they are complex and have limitations.