How it works
- CSS box-shadow supports multiple comma-separated layers — stack a tight dark shadow with a soft wide one for a more realistic, layered depth effect (common in modern card designs).
- Positive Y offset pushes a shadow down; negative pushes it up. Same logic for X and left/right.
- Spread expands or shrinks the shadow independent of blur.
- Inset draws that layer's shadow inside the element's border instead of outside.
Design CSS box-shadows visually — adjust offset, blur, spread, colour and inset, stack multiple shadows, and copy production-ready CSS. Live preview updates as you drag.
Frequently asked questions
What do offset, blur and spread do?
Offset X/Y move the shadow horizontally and vertically; blur softens its edge; spread grows or shrinks the whole shadow before blurring. Negative spread is handy for subtle 'lifted card' effects.
Can I layer multiple shadows?
Yes. CSS lets you comma-separate several box-shadow values, and the generator stacks them so you can build depth — for example a tight dark shadow plus a wide soft one.
What is the 'inset' option?
Inset draws the shadow inside the element instead of outside, useful for pressed buttons, inset fields and inner-glow effects.
Will the CSS work in all browsers?
box-shadow is supported in every modern browser without a vendor prefix, so the copied code works as-is in current Chrome, Firefox, Safari and Edge.