Box Shadow Generator
Tune box-shadow with sliders and copy the CSS string.
Examples (click to try)
How to Use the Box Shadow Generator
Adjust offset (X/Y), blur, spread and color with the sliders, or pick an example chip. The preview and the box-shadow string update together. Turn on inset to cast the shadow inside the element for a recessed look.
Use it to tune card elevation, modal shadows, input inset effects and focus states before pasting the final CSS into your stylesheet. The preview gives quick feedback while keeping the output as standard CSS.
Examples
- Subtle card →
box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.15); - Strong lift →
box-shadow: 0px 10px 30px -4px rgba(0,0,0,0.25); - Inset →
box-shadow: inset 0px 2px 4px 0px rgba(0,0,0,0.20); - Brand color →
box-shadow: 0px 6px 16px 0px rgba(234,99,121,0.35);
Practical Tips
- For most UI cards, combine a positive Y offset with a soft blur and low opacity.
- Use spread sparingly; large spread values can make shadows look heavy.
- Inset shadows work best for pressed controls, input wells and recessed surfaces.
FAQ
Is my data sent to a server?
No. Everything runs in your browser; nothing is transmitted or stored externally.
How do I make a natural-looking shadow?
Keep X at 0, push Y slightly positive (downward), use a larger blur, and a black color at low opacity (10–20%). Example: box-shadow: 0 4px 12px rgba(0,0,0,0.15).
What is inset for?
With inset, the shadow falls inside the element for a pressed-in look. Useful for inputs and toggles that should appear recessed. Example: box-shadow: inset 0 2px 4px rgba(0,0,0,0.2).
Can I stack multiple shadows?
CSS accepts several shadows separated by commas. This tool builds one shadow, so copy the output and join values with commas — layering a near and a far shadow adds depth.