CSS Box Shadow Generator
Design box shadows visually with live preview. Adjust offset, blur, spread, color, and opacity. Copy the CSS code instantly. Free online tool.
How to Use the Box Shadow Generator
Adjust the sliders to control horizontal offset, vertical offset, blur radius, spread, color, and opacity. The live preview updates instantly. Add multiple shadow layers for complex depth effects commonly used in modern UI design.
Tips for Realistic Shadows
Use low opacity (0.1-0.3), moderate blur, and a slight vertical offset for natural-looking elevation. Stack two shadows — a tight one for definition and a soft one for ambient light — to mimic Material Design elevation.
FAQ
What is the inset option?
Inset shadows appear inside the element instead of outside, creating a pressed or recessed effect. Useful for input fields and card inner shadows.
Can I use multiple box shadows?
Yes. Click "ADD SHADOW" to layer multiple shadows. CSS supports comma-separated shadow values, and this tool generates the combined code for you.
RELATED TOOLS