CSS Box Shadow Generator
Free online box-shadow generator. Drag sliders for offset, blur, spread, color, and inset, preview live, and copy the CSS.
About This Free Online CSS Box Shadow Generator
Our free online CSS box-shadow generator lets you design drop shadows visually and copy the exact CSS. Use the sliders to set the horizontal and vertical offset, blur, spread, shadow color, and opacity, toggle inset for inner shadows, and watch a live preview update in real time. When it looks right, copy the ready-to-use box-shadow property and paste it into your stylesheet. Everything runs in your browser — no signup, no limits. Perfect for cards, buttons, modals, and any element that needs depth.
Features of Our CSS Box Shadow Generator
- Offset, blur, spread, color, opacity, and inset controls
- Live preview as you drag the sliders
- Copy-ready box-shadow CSS
- Works for cards, buttons, modals, and more
- Live results, no signup
- 100% free — runs entirely in your browser
How to Use the CSS Box Shadow Generator
The CSS Box Shadow Generator works right in your browser — no signup, no installation. Follow these steps:
- Drag the offset, blur, and spread sliders to shape your shadow.
- Pick a shadow color and set its opacity; toggle inset for an inner shadow.
- Watch the live preview update.
- Click Copy CSS and paste the box-shadow into your stylesheet.
Frequently Asked Questions About CSS Box Shadow Generator
How do I make a CSS box shadow?
Use the box-shadow property: horizontal offset, vertical offset, blur, spread, then a color. This tool writes that for you — drag the sliders and copy the generated box-shadow line straight into your CSS.
What does spread do?
Spread grows or shrinks the shadow before the blur is applied. A positive spread makes the shadow larger than the element; a negative spread (common for soft, tight shadows) pulls it in.
What is an inset shadow?
An inset shadow is drawn inside the element instead of outside, creating a pressed-in or inner-glow look. Toggle the Inset option to switch between outer and inner shadows.
Why Choose the CSS Box Shadow Generator?
Skip writing CSS by hand. The CSS Box Shadow Generator generates clean, copy-ready code with a live preview, all in your browser — tweak the controls, watch it update in real time, and paste the result straight into your stylesheet.