How to use the box shadow generator
- Drag the sliders — the preview updates live.
- Add layers to stack several shadows; click a layer to edit it.
- Copy the CSS and paste it into your stylesheet.
What each value does
The syntax is box-shadow: x y blur spread color. X and Y offset the shadow horizontally and vertically. Blur softens the edge — 0 gives a hard shape. Spread grows or shrinks the whole shadow before blurring, so a negative spread pulls it in tight under the element. Adding inset draws the shadow inside the box instead, which is how you create pressed buttons and inset form fields.
Why real designers stack multiple shadows
A single large blurry shadow reads as fake because real objects cast light differently at different distances. The convincing approach is two or three layers: one tight, low-opacity shadow right under the element for contact, plus a larger, softer one further out for ambient depth. That's what the "Layered" preset here does, and it's the technique behind almost every polished design system.
Benefits
- Visual sliders for offset, blur, spread, opacity and colour with a live preview.
- Stack up to five shadow layers for realistic, designer-quality depth.
- Supports inset shadows for pressed buttons and inset fields.
- Presets including a properly layered realistic shadow.
Limitations to know
- It builds box-shadow only — not text-shadow or drop-shadow filters.
- Very large blur radii on many animated elements can cost paint performance.
- The preview uses a fixed box shape rather than your actual component.
Common mistakes to avoid
- Using one big blurry shadow, which reads as fake — real depth needs layers.
- Confusing blur with spread; spread resizes the shadow before it is blurred.
- Forgetting that inset offsets appear to move in the opposite direction.
Alternatives
For backgrounds use the CSS Gradient Generator; for colour values use the Color Converter.
Last updated: August 2026 · Reviewed by the AI Toolbox editorial team.
Frequently asked questions
Can I have more than one shadow?
Yes — comma-separate them. This tool builds the full stacked value for you.
What's the difference between blur and spread?
Blur softens the edge; spread changes the shadow's size before blurring. Negative spread tightens it under the element.
Do big shadows hurt performance?
Very large blur radii on many animated elements can cost paint time. For static cards it's not a concern.
Does inset work the same way?
Yes, but the shadow is drawn inside the border box — offsets move it in the opposite visual direction.