Box Shadow
Visual shadow editor
box-shadow: 0px 4px 14px -6px rgba(0, 0, 0, 0.15),
0px 2px 4px -2px rgba(0, 0, 0, 0.08);What is Box Shadow?
Design multi-layer CSS box-shadows visually — with X/Y offsets, blur, spread, colour, opacity, and inset toggles per layer. Stacked shadows give depth that single shadows can't. Copy the CSS and drop it into your stylesheet; no more trial-and-error with magic numbers.
How do I use Box Shadow?
- Start with the default two-layer shadow, or add a layer.
- Tune X/Y/blur/spread/colour/opacity per layer.
- Toggle inset for inner shadows (like glow around an input).
- Copy the CSS.
When should I use Box Shadow?
Box Shadow handles all box-shadow cases. For background gradients, use Gradient Generator. For clipping an element into a shape, use Clip Path.
Can I layer multiple shadows?
Yes. CSS supports comma-separated shadows; add as many layers as you like. Useful for elevation effects or soft double-stroke outlines.
Inset shadows?
Yes — toggle "Inset" on any layer to get a shadow on the inside of the element, handy for pressed-in buttons or carved-out wells.
Can I copy the generated CSS?
Yes. Output is ready-to-paste box-shadow declarations, including vendor prefixes for older browsers if needed.
Is my file uploaded anywhere?
No. Everything runs in your browser. Your files never leave your device, and there is no server component for this tool.