Tweak the sliders to build a shadow and copy the CSS — it all renders locally in your browser, so nothing leaves your device.
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.
How web depth stopped depending on image files
Drop shadows were once frequently baked into image assets. CSS box-shadow let browsers render shadows directly, making size, blur, spread and offset adjustable without creating a new image.
A shadow is more than darkness
Offset suggests the apparent direction of a light source, blur changes softness, and spread changes how far the shadow expands before blur is considered. Small changes can make an element appear raised, recessed or floating.