About this tool
Build box-shadow values with sliders and live preview. Experiment with motion, layout, and color in real time — then copy values into your stylesheet.
Tune offset X/Y, blur, spread, and shadow color with the sliders. Toggle inset when you need an inner shadow. Example — Soft elevated card: try `x:0 y:4 blur:12 spread:0 color:rgba(0,0,0,0.15)` and expect something like `box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);`.
Layered multi-shadow stacks may require combining several generated values manually. See also: CSS Gradient Generator, and Color Converter. Runs in your browser — nothing you paste gets uploaded.
How to use
- Tune offset X/Y, blur, spread, and shadow color with the sliders.
- Toggle inset when you need an inner shadow.
- Preview elevation against the sample surface.
- Copy the box-shadow value into your design tokens or component CSS.
Example
Soft elevated card
Input
x:0 y:4 blur:12 spread:0 color:rgba(0,0,0,0.15)
Output
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
Limitations
- Layered multi-shadow stacks may require combining several generated values manually.
- Filter: drop-shadow behaves differently on transparent PNGs — this tool targets box-shadow.
- Does not emit theme-aware light/dark token pairs automatically.
Related guides
1Related tools
2Frequently asked questions
What does the Box Shadow Generator do?
Build box-shadow values with sliders and live preview. Runs in your browser — no install, no account.
How do I use the Box Shadow Generator?
Tune offset X/Y, blur, spread, and shadow color with the sliders. Toggle inset when you need an inner shadow. Preview elevation against the sample surface. Copy the box-shadow value into your design tokens or component CSS.
Is the Box Shadow Generator free?
Yes. No signup, no usage limits, no paywall.
Does the Box Shadow Generator upload my data?
No. Processing happens locally in JavaScript. Your input is not uploaded, stored, or logged.
What are the limitations of the Box Shadow Generator?
Layered multi-shadow stacks may require combining several generated values manually. Filter: drop-shadow behaves differently on transparent PNGs — this tool targets box-shadow. Does not emit theme-aware light/dark token pairs automatically.