CSS Box Shadow Generator

`box-shadow: [inset?] <offset-x> <offset-y> <blur> <spread> <color>`

• offset-x — horizontal distance. Positive = right. Usually 0 for natural shadows (the light is from above).
• offset-y — vertical distance. Positive = down. Real-world shadows from overhead lighting have small positive offset-y.
• blur — softness. 0 = sharp edge (looks like a hard cutout); 20-30 = realistic soft shadow.
• spread — extra spread radius. Positive = larger, negative = smaller than the element. Used to "tighten" the shadow under the element.
• color — usually rgba black with low alpha (0.05-0.2). Pure black at high alpha looks like the element is on fire.
• inset (optional) — render INSIDE the element instead of outside. Used for "depressed" buttons, input fields, sunken panels.

• Material 3 — elevations 1-5. Each is a specific 3-layer shadow with carefully-tuned blur/spread. Used by Google's entire product line.
• Tailwind shadow-sm to shadow-2xl — 5-step ramp from "barely there" to "modal-sized". Single-layer shadows; reasonable defaults for utility-class workflows.
• Apple Human Interface Guidelines — system-controlled materials with translucency. iOS/macOS apps use the system blur-and-shadow effects rather than fixed CSS values.
• Custom — define your own scale based on your design system's elevation tokens (e.g., elevation.card, elevation.modal). Document it once; reuse.

Box-shadows are pixel operations — the browser composites the shadow on a separate layer and blends it. Small static shadows are basically free. Large blurred shadows (blur > 40px) over a large area can cost milliseconds per frame; animating them at 60fps can drop frames.

Two performance tricks: (1) animate `transform` and `opacity` of a child shadow element instead of the shadow itself — those properties are GPU-accelerated and free. (2) for elements that move during animations, use `will-change: box-shadow` or convert the shadow to a filter (filter: drop-shadow) which sometimes performs differently.

• You are designing a new component and want to compare three shadow options visually before committing.
• You inherited a stylesheet with "single-layer 0 4px 8px rgba(0,0,0,0.3)" shadows and want to upgrade them to multi-layer.
• You are tuning a focus-ring or interactive-state shadow (button hover, input focus) and want to preview the transition.
• You are building a design system and need preset elevation tokens that match a specific framework's convention.

• It will not redesign your component. The shadow contributes; layout, spacing, color, typography do the rest. A great shadow on a misaligned button is still a misaligned button.
• It will not check accessibility. Shadow is decorative — screen readers ignore it. Focus indicators using ONLY shadow may not meet WCAG (need 3:1 contrast against adjacent colors).
• It will not handle text-shadow. Different property, different syntax (no spread parameter), different use cases. Text-shadow on body text usually looks bad; reserve for headings or specific effects.