CSS Box Shadow Generator
Controls
Preview
CSS Output
Full Rule
How to Use
- Set offset — Drag X/Y sliders to position the shadow.
- Blur & spread — Increase blur for soft edges; adjust spread to grow or shrink the shadow.
- Color & opacity — Pick a color and transparency. Dark semi-transparent shadows look most natural.
- Toggle inset — Enable for inner shadows on inputs or pressed buttons.
- Copy & paste — Hit "Copy CSS" and use directly in your stylesheet.
What Is CSS Box Shadow?
box-shadow draws shadows around an element's border box — no images needed. Each shadow consists of X/Y offset, blur, spread, and color.
Use inset for inner shadows. Shadows follow border-radius automatically. Stack multiple layers (tight key shadow + soft ambient) for realistic depth.
Common Use Cases
Tips & Best Practices
Keep opacity independent of hue — easier to tune across light and dark modes.
A small dark shadow near the element plus a large soft ambient shadow creates realistic depth.
Keep shadow direction the same (usually down-right) across your entire UI.
Avoid animating large blurs on many elements at once — it can hurt scroll performance on mobile.
Frequently Asked Questions
What is the difference between blur and spread?
Blur softens edges — higher values make it more diffuse. Spread changes the shadow size before blurring: positive grows it, negative shrinks it.
When should I use inset?
Use inset for pressed buttons, form fields, and recessed panels. Default (outer) shadows lift elements above the background.
Can I apply multiple shadows?
Yes. Use comma-separated values. This tool supports up to three layers — enough for key, ambient, and highlight shadows.
Box-shadow vs drop-shadow — which is better?
box-shadow follows the border box (cards, buttons). filter: drop-shadow() follows the alpha shape (icons, PNG cutouts).
Does box-shadow work in all browsers?
Yes. Supported without prefixes in all modern browsers. Test stacked shadows on target devices if using large blur values.