CSS Box Shadow Generator
Design CSS box shadows visually — adjust offset, blur, spread and color with a live preview.
Design CSS box shadows visually
The Box Shadow Generator lets you craft the perfect CSS box-shadow with sliders for horizontal and vertical offset, blur, spread, color, and opacity — plus an inset toggle. A live preview updates as you drag, and the ready-to-use CSS is one click away. It turns a fiddly, trial-and-error property into an instant, visual process.
Understanding the box-shadow property
The CSS box-shadow property takes several values in order: horizontal offset, vertical offset, blur radius, spread radius, and color. An optional inset keyword draws the shadow inside the element instead of outside. Positive offsets push the shadow right and down; larger blur softens it; spread grows or shrinks it. Understanding each value helps, but seeing them change live is far faster than guessing.
The values explained
| Value | Effect |
|---|---|
| Horizontal offset | Moves the shadow left (−) or right (+) |
| Vertical offset | Moves the shadow up (−) or down (+) |
| Blur | Softens the edge — higher is fuzzier |
| Spread | Expands (+) or contracts (−) the shadow size |
| Inset | Draws the shadow inside the element |
How to use it
- Drag the sliders to shape the shadow.
- Pick a color and set the opacity.
- Toggle inset for an inner shadow.
- Copy the generated CSS into your stylesheet.
Tips for beautiful shadows
- Keep it subtle. Soft, low-opacity shadows look more modern than hard, dark ones.
- Offset down, not sideways. Mimic natural overhead light with mostly vertical offset.
- Layer shadows by combining two box-shadow values (a tight one and a soft one) for depth.
- Use color, not just black. A shadow tinted toward your brand color feels cohesive.
Where box shadows shine
Box shadows create depth and hierarchy: lifting cards off the background, highlighting buttons on hover, framing modals, and giving inputs a subtle inset. Used well, they guide the eye and make interfaces feel tactile. Used heavily, they clutter — so this generator's live preview helps you dial in just enough.
Private and free
Everything runs in your browser. There is no sign-up and no limit — generate as many shadows as you like, completely free.
Frequently asked questions
What is the order of box-shadow values?
Horizontal offset, vertical offset, blur, spread, then color. Add the inset keyword for an inner shadow.
How do I make a soft, modern shadow?
Use a small vertical offset, a generous blur, a slightly negative spread, and a low opacity color.
Can I create an inner shadow?
Yes. Toggle inset to draw the shadow inside the element instead of outside.
Is the tool free?
Yes, completely free with a live preview, and it runs entirely in your browser.