Box Shadow Generator
Build realistic or playful CSS shadows with live preview and copy-ready code.
How to use: Move the sliders to shape the shadow, add extra layers for depth, try the presets, then copy the box-shadow CSS.
How to use the Box Shadow Generator
Shadows help interfaces feel tactile: they lift cards off the page, show which button is pressed and guide the eye. Good shadows are usually subtle and often made of more than one layer, which is exactly what this generator makes easy.
The horizontal and vertical offsets move the shadow away from the box; a positive vertical value places it below, as if light comes from above. Blur softens the edge, and spread grows or shrinks the shadow before blurring. A negative spread with a large blur gives the popular “floating card” look. Choose the colour and opacity separately so you can tint shadows to match your brand instead of using flat grey.
Click “Add layer” to stack up to five shadows. Designers often combine a small, sharp shadow for contact with a large, soft one for ambient depth. Inset shadows appear inside the box, which suits pressed buttons and input fields. Adjust the corner radius, box colour and background to see the effect in context, including on dark backgrounds.
The preset buttons load ready-made styles such as soft UI, retro offset and neon glow. Copy the CSS and paste it into any rule that needs a shadow.
Frequently asked questions
What is the difference between blur and spread?
Spread changes the size of the shadow; blur controls how soft its edge is.
Why use more than one shadow?
Real objects cast a sharp shadow close by and a soft one further away. Two layers look more natural than one.
Do box shadows slow pages down?
Static shadows are cheap. Very large blurred shadows that animate can cost performance on slow phones.