About the CSS Box Shadow Generator
Shadows help users understand depth and hierarchy: raised cards, floating buttons and modal dialogs all rely on them. The CSS Box Shadow Generator lets you design the perfect shadow by dragging sliders and watching a live preview, instead of repeatedly editing values in your code.
Control the horizontal and vertical offset, blur radius, spread, color and opacity, or switch to an inset shadow for pressed or neumorphic effects. Preview it on any box and background color, and start from presets like Soft, Floating, Retro or Glow. The output is a single clean box-shadow line.
How to use the CSS Box Shadow Generator
- Adjust offset, blur, spread and opacity sliders.
- Pick the shadow, box and background colors.
- Toggle inset or try a preset.
- Copy the generated box-shadow CSS.
Frequently asked questions
What does negative spread do?
A negative spread shrinks the shadow before it is blurred, which creates a softer, more realistic shadow that stays underneath the element.
How do I add multiple shadows?
Separate several shadow values with commas in one box-shadow declaration. Layering a small sharp shadow with a large soft one looks very natural.
Does box-shadow affect layout?
No. Shadows are painted outside the element and never change its size or push other elements.