CSS Box Shadow Generator
Visually create CSS box shadows with live preview
box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25);Report a Problem
Found a bug or have a suggestion? Help us improve this tool.
What is this tool?
CSS box-shadow generator creates production-ready box-shadow declarations with live visual preview. Supports single and multiple layered shadows, with controls for horizontal/vertical offset, blur radius, spread radius, color, and inset option. Generate complex shadow effects visually without writing CSS manually.
How to use
- 1
Add shadow layer
Click add to create a new shadow layer.
- 2
Adjust parameters
Set X/Y offset, blur, spread, color, and opacity for each layer.
- 3
Preview & copy
See live preview and copy the generated CSS code.
Frequently Asked Questions
How does box-shadow work?
box-shadow adds a shadow effect around an element's frame. Syntax: box-shadow: h-offset v-offset blur spread color inset. Multiple shadows are comma-separated. The browser renders each shadow layer independently and composites them together. Use multiple layers to create complex depth effects.
What makes a realistic shadow?
Realistic shadows have a larger blur relative to offset (typically 3-5x), slightly lower opacity (10-30%), and warm-tinted colors. Multiple layered shadows with different blur sizes create more natural depth. Material Design provides specific shadow values for different elevation levels.
What should I do if the result seems wrong?
Double-check your input values. The tool uses standard formulas but edge cases may require manual verification.