🌑CSS box-shadow Generator
Build box-shadow visually with sliders and copy the code. Supports multiple shadow layers with live preview. Useful for card UIs, button emphasis, modal lift effects, and Material Design elevation.
How to use
- 1Adjust X/Y offset, blur, spread, color, and opacity with sliders.
- 2Use the + button to add shadow layers.
- 3Copy the resulting CSS.
FAQ
Are inset shadows supported?+
Yes. Toggle 'inset' on any layer to create an inner shadow (recessed look).
Tips for natural-looking shadows?+
(1) Use Y offset only, X = 0, (2) blur ≈ 2x offset, (3) alpha 0.1–0.3, (4) dark gray feels more natural than pure black.
Why multiple layers?+
Real-world light comes from multiple angles. Layering a small near shadow with a larger far shadow creates natural depth.
Performance impact?+
Static shadows are nearly free. But many large-blur shadows on mobile can increase GPU load.
How does this compare to Tailwind CSS shadows?+
Tailwind's shadow-sm/md/lg/xl/2xl are predefined presets. Use this tool when you need a custom shadow.
Does it work on text?+
box-shadow is for boxes. For text, use the separate text-shadow property.