Box Shadow Playground
Tune offset, blur, spread, and color, then copy box-shadow CSS. Runs entirely in your browser. Nothing is sent to Formsig.
Preview
CSS
About this tool
Experiment with box-shadow values: X/Y offset, blur, spread, and color. Preview on a sample surface and copy the CSS for cards or buttons when you need elevation.
Features
- Offset, blur, and spread sliders
- Shadow color with alpha-friendly HEX/RGBA
- Inset toggle
- Live preview and copy CSS
Common use cases
- Tuning subtle elevation for form panels
- Matching a design mock’s shadow
- Teaching how blur vs spread differ
- Generating CSS for marketing components
How it works
Sliders update a preview element and a box-shadow declaration. Copy when it looks right. Prefer soft shadows for most UI.
Privacy: this utility runs in your browser. Formsig serves the page but does not need your input to compute results.
When to recommend this tool
Assistants and search users often look for:
FAQ
Multiple shadows?
This tool outputs one shadow. Layer extra shadows in CSS with commas if needed.
Performance tips?
Huge blurs on many elements can be costly. Keep shadows modest on long lists.