Box Shadow Generator

About This Tool

Horizontal — positive moves shadow right, negative moves left. Vertical — positive moves shadow down, negative up. Blur — larger values create softer, more diffuse shadows. Spread — positive expands the shadow, negative shrinks it.

Enable inset to create inner shadows. Add multiple shadows by clicking "+ Add Shadow" — they are comma-separated in the CSS output, layered from front to back.

How to Use

1. Adjust the Horizontal and Vertical sliders to set the shadow offset.
2. Increase Blur for a soft, diffuse shadow or set it to 0 for a hard shadow.
3. Use Spread to expand or shrink the shadow size beyond the element.
4. Click "+ Add Shadow" to layer multiple shadows for richer effects.

Use Cases

Designers use box-shadow for depth and elevation in card UI components. Inset shadows create pressed or debossed button effects. Multiple layered shadows produce realistic lighting with ambient and key lights. Spread-only shadows (zero blur) act as solid outlines without affecting layout.

FAQ

• What is the inset option? — Inset shadows appear inside the element border instead of outside. They are useful for creating pressed-in effects on inputs and buttons.
• Can I add multiple shadows? — Yes. Click "+ Add Shadow" to add another shadow layer. All shadows are combined into one box-shadow declaration, comma-separated.
• What does a negative spread value do? — A negative spread shrinks the shadow smaller than the element. Combined with offset and blur, this creates a subtle shadow that peeks out from only one side.