100% offline
CSS
Free · no signup
Updated
Box Shadow Generator
A Box Shadow Generator builds a CSS box-shadow from visual controls — horizontal and vertical offset, blur, spread, color, opacity, and inset — with a live preview and copy-ready CSS, all in your browser.
0px
10px
20px
0px
20%
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.20);About Box Shadow Generator
Drag the offset, blur, and spread sliders, pick a shadow color and opacity, and toggle inset to switch between a drop shadow and an inner shadow. The preview box updates live and the box-shadow declaration below always matches it. Output is plain CSS you can paste into any stylesheet. Nothing is uploaded.
What Box Shadow Generator does
- Horizontal/vertical offset, blur, and spread sliders
- Shadow color with opacity control
- Inset toggle for inner shadows
- Live preview that matches the output exactly
- Copy-ready box-shadow declaration
- 100% in-browser — nothing uploaded
When to reach for Box Shadow Generator
- Adding a soft elevation shadow to cards and modals
- Creating an inset shadow for a pressed-button state
- Matching a shadow from a design spec by eye
- Prototyping a layered shadow look before committing values
How to use Box Shadow Generator
- 01
Set the offsets
Drag horizontal and vertical sliders to position the shadow.
- 02
Tune blur, spread, and color
Adjust softness, size, and color/opacity; toggle inset for an inner shadow.
- 03
Copy the CSS
The box-shadow value updates live — copy it with one click.
When to use Box Shadow Generator vs alternatives
| Alternative | Use Box Shadow Generator when… | Use the alternative when… |
|---|---|---|
| Writing box-shadow by hand | you want to tune blur and spread visually. | you're copying exact values from a design token. |
| DevTools shadow editor | you want a focused preview and copyable output without inspecting an element. | you're editing a shadow on a live page element. |
Frequently asked questions
What do blur and spread actually do?
Blur softens the shadow's edge — 0 is a hard edge, higher values fade it out. Spread grows (positive) or shrinks (negative) the shadow before the blur is applied, so a positive spread makes the shadow larger than the element.
What is an inset shadow?
An inset shadow is drawn inside the element's box instead of behind it, making the element look recessed or pressed in. Toggle the inset option to switch between a normal drop shadow and an inner one.
Can I layer multiple shadows?
CSS supports comma-separated shadow layers. This generator outputs a single, clean layer you can duplicate and combine — paste it twice with different values to stack effects.