Box Shadow Generator
Generate CSS box shadows with a live preview. Adjust offset, blur, spread, color, and opacity — then stack up to 4 shadows and copy the CSS.
Frequently Asked Questions
What is a CSS box shadow?
The CSS box-shadow property attaches one or more shadow effects to an element's frame. You can control horizontal and vertical offset (position), blur radius (softness), spread radius (size), color, and whether the shadow is inset (inside) or outset (outside).
What does "inset" do?
Without inset, a box shadow is drawn outside the element like a drop shadow. With inset, the shadow is drawn inside the element's border, giving an inner glow or pressed-in effect.
Can I stack multiple box shadows?
Yes — CSS allows multiple comma-separated shadows on a single box-shadow property. Use "Add Shadow Layer" to create up to 4 layered shadows. The first shadow in the list is drawn on top.