Box Shadow Generator
Preview a CSS box shadow and copy its rule.
Processing stays in your browser. Shadows do not affect layout size. Check contrast and clipping in the actual component.
How to use the box shadow generator
Preview a CSS box shadow and copy its rule. Complete the horizontal offset (px), vertical offset (px), blur (px), spread (px), shadow color, opacity (0–1), shadow position fields above. Choose Run tool, review the output and visual preview where available, then copy or download the result.
Example
A vertical offset of 8 and blur of 24 creates a soft shadow beneath the box.
Good to know
Shadows do not affect layout size. Check contrast and clipping in the actual component.