How to use Box Shadow Generator
Layered shadows help distinguish surfaces. A small, sharper shadow suggests contact; a larger soft layer suggests ambient depth.
- Set horizontal and vertical offsets in pixels. Negative values move the shadow left or upward.
- Blur softens the edge. Spread grows or shrinks the shape before blur; a negative spread can keep a broad shadow tucked beneath a card.
- Choose a color and opacity for each layer. Enable inset to move that layer inside the element. The first layer appears on top.
A practical starting point
A restrained two-layer card shadow keeps the bottom edge legible without a dark halo.
box-shadow: 0 2px 4px rgb(20 32 56 / 0.08), 0 12px 28px rgb(20 32 56 / 0.12);
Common mistakes
- Large opaque shadows quickly look muddy. Reduce opacity before increasing blur.
- An ancestor with overflow: hidden can clip an otherwise valid shadow.
Frequently asked questions
Does a shadow change layout size?
No. Box shadows paint outside or inside the border box without reserving layout space.
Why use multiple layers?
Separate layers let you tune the sharp contact edge independently from the wider ambient shadow.