CSS Shadow Generator

The syntax is box-shadow: offsetX offsetY blurRadius spreadRadius color. Optionally add 'inset' for inner shadows. Example: box-shadow: 0 4px 12px rgba(0,0,0,0.15). Tip: use a slight X offset (1-2px) and moderate Y offset (4-8px) for natural-looking drop shadows that simulate overhead lighting.

Stack multiple box-shadow values separated by commas. Use a small tight shadow (2px blur) for crispness near the element and a larger diffused shadow (20px+ blur) for ambient depth. This technique is used in Material Design and modern UI libraries for realistic elevation.

box-shadow always creates a rectangular shadow matching the element's box, including any border-radius. drop-shadow() (via filter) follows the actual visible shape of the element, including transparent areas in images. Tip: use drop-shadow for icons and PNGs with transparency.

Shadows are GPU-accelerated in modern browsers, but very large blur values (50px+) or many shadow layers on frequently repainted elements can slow rendering. Tip: avoid animating box-shadow directly — instead, put the shadow on a pseudo-element and animate its opacity for smooth transitions.

Tailwind provides shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, and shadow-2xl utilities. For colored shadows use shadow-[color], e.g. shadow-blue-500/25. For custom values, use arbitrary syntax: shadow-[0_4px_12px_rgba(0,0,0,0.1)]. Inner shadows use shadow-inner.