CSS Box Shadow Generator
Design multi-layer CSS box shadows with a live preview. Control offset, blur, spread, color and inset — then copy the code. Free, no sign-up.
Generated CSS
✨ Shadow presets
Click any preset to load it into the generator and start experimenting.
What is CSS box-shadow?
The box-shadow CSS property adds one or more shadow effects to an element's frame. Each shadow is defined by: horizontal offset (positive = right), vertical offset (positive = down), blur radius, spread radius (grows or shrinks the shadow), and a color. An optional inset keyword moves the shadow inside the element.
You can layer multiple shadows separated by commas — this technique is used by Material Design and modern UI libraries to simulate realistic depth and elevation. Our generator lets you add up to 5 independent shadow layers with individual controls.
Frequently asked questions
How do I get a soft glow effect?
Set both offsets to 0, increase the blur radius significantly (e.g. 40px), set spread to 0, and use a semi-transparent or vivid color. Experiment with the alpha transparency in the color picker.
Can I create neumorphism (soft UI) shadows?
Yes! Try the Neumorphism preset above for a ready-made example. The technique uses two shadows: one light (white/lighter than the background color, offset top-left) and one dark (darker, offset bottom-right). The key is making the element and its background the same color.
Does box-shadow affect layout?
No. Unlike outline or border, box-shadow does not affect layout — it doesn't take up space. The spread radius visually grows the shadow but doesn't push other elements.