Skip to main content
CSSpeek

Free tool

Box Shadow Lab

Design single- or multi-layer CSS box shadows with sliders and a live preview. Add layers until the depth looks right, then copy the CSS.

Start from a preset

  • Layer 1

  • Layer 2

CSS output

box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 4px 12px 0px rgba(0, 0, 0, 0.08);

Want to lift shadows from any site you visit?

CSSpeek reads the full box-shadow value of any element — including multi-layer shadows — and copies it to your clipboard. Add it to Chrome to stop rebuilding shadows by hand.

Add to Chrome — Free

How to build a great shadow

  1. Start with an ambient layer. Low offset (0, 4px), large blur (20–40px), opacity around 0.05–0.10. This is the "soft glow" that makes the element feel grounded.
  2. Add a contact layer. Very low offset (0, 1–2px), small blur (2–4px), opacity 0.06–0.12. This is the sharp edge that implies the element is just barely lifting off the surface.
  3. Tune from there. Increase offset Y for more lift. Increase opacity for a heavier feel. Add a third layer if you want drama.

The best shadows on modern sites follow this pattern. Once you see the two-layer structure, you'll notice it everywhere.

Box shadows: frequently asked questions

Why do professional shadows use multiple layers?
Real-world shadows from physical objects aren't one flat gradient — they're a soft ambient shadow plus a tighter contact shadow. Layering two or three box-shadows with different offsets and opacities reproduces that perceptual cue. Single-layer shadows tend to look flat or fake.
Can I paste an existing box-shadow value?
Paste support is on the roadmap. For now, use the sliders to rebuild it. If you want to read the exact box-shadow from a live site, install CSSpeek — hover any element and copy the full string in one click.
What's the difference between blur and spread?
Blur softens the edge — higher blur means a more diffuse shadow. Spread scales the shadow up or down before the blur is applied. Negative spread shrinks the shadow smaller than the element; positive spread extends it beyond.
What does 'inset' do?
Inset shadows render inside the element's border, making it look recessed rather than raised. Useful for pressed-button states and inner glow effects.
Is my input sent to a server?
No. The lab runs entirely in your browser.

More free CSS tools