CSS Shadow Generator

How to use

1. Set horizontal and vertical offsets plus blur and spread for the primary shadow layer.
2. Pick semi-transparent colors; duplicate layers to separate ambient and key lights for realistic depth.
3. Copy the combined declaration into your stylesheet and verify contrast on light and dark themes as well as focus-visible outlines for accessibility.

FAQ

When should I use inset shadows?

Inset implies material pressed into the surface—inputs, wells, and toggle tracks. Outer shadows lift floating surfaces; mixing both works but avoid muddy stacks with excessive blur.

Do huge blur radii hurt performance?

Large blurs can strain GPUs on low-end phones. Prefer design-system elevation tokens, smaller radii, or pseudo-element tricks that animate opacity instead of massive blur transitions.

How do I animate shadows smoothly?

Transition sparingly—blurring is expensive. Often animate `transform`/`opacity` on a dedicated layer or use filter drop-shadow alternatives that match your motion guidelines.