Quick Answer
A box shadow generator builds the CSS box-shadow property visually. Offset, blur, spread, color, opacity and inset — every value on its own slider, with a live preview showing the result as you drag.
What This Tool Does
Six controls produce one box-shadow declaration. The preview box sits beside the controls, so you see exactly how each slider changes the shadow. An inset toggle switches between outer and inner shadows.
Key Features
- Full control set — X/Y offset, blur, spread, color, opacity, inset.
- Live preview — the shadow updates with every drag.
- RGBA output — opacity is baked into a clean
rgba()color. - Copy-ready CSS — one click to copy the declaration.
How to Use the Box Shadow Generator
- Drag X and Y offset to move the shadow.
- Adjust blur and spread to shape it.
- Pick a color and opacity, toggle inset if needed.
- Click Copy CSS and paste it into your stylesheet.
Use Cases
- Card and button elevation that feels native to your design system.
- Subtle depth for modals and popovers.
- Quickly matching a shadow from a mockup.
Tips
- Small offsets with big blur look soft and modern; big offsets with small blur look hard and cartoonish.
- Use
insetfor pressed or sunken states. - Keep opacity low (15–40%) for a natural shadow.
Privacy
Everything runs locally; nothing is uploaded.
Conclusion
Shadows are fiddly to type and easy to design. Build it visually, copy the CSS, and move on — free.