Build a CSS 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 CSS Box Shadow Generator?
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 CSS Box Shadow Generator?
- 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 CSS Box Shadow Generator?
Box Shadow handles all box-shadow cases. For background gradients, use Gradient Generator. For clipping an element into a shape, use Clip Path.
Frequently asked questions
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.
Tools that pair well with CSS Box Shadow Generator
- CSS Border Radius Generator shape any corner, free and in your browser.
- CSS Gradient Generator design css gradients, free and in your browser.
- CSS Clip Path Generator visual clip-path editor, free and in your browser.
- Color Picker pick, convert, sample colors, free and in your browser.