<- Back to tools

Designer / CSS

Box Shadow Generator

Build layered box shadows visually, tweak blur and spread, and copy ready-to-use CSS for cards, buttons, and surfaces. Layer realistic shadows, preview them on real surfaces, and copy production-ready CSS without guesswork.

2

Layers

card

Surface

18px

Radius

Live

CSS state

Layer 1

Layer 2

Status

Loaded starter shadow

Card surface

Layered shadows help cards feel grounded without getting muddy.

CSS output

box-shadow: 0px 12px 28px -12px rgba(15, 23, 42, 0.18), 0px 4px 10px -4px rgba(15, 23, 42, 0.12);

Layer summary

0px 12px 28px -12px rgba(15, 23, 42, 0.18)

Drop shadow

0px 4px 10px -4px rgba(15, 23, 42, 0.12)

Drop shadow

Recent shadows

Randomize or load a preset and your recent shadow explorations will appear here.

Saved shadows

Save a shadow you like and reuse it across surfaces later.

Why this one sticks

Shadows are hard to tune from raw numbers, so a live surface preview saves time immediately.

Multiple layers are what make modern UI shadows feel polished rather than heavy.

Copy-ready CSS, tokens, and Tailwind output keep the handoff from design to code clean.

Natural pairings

This works especially well alongside the gradient and color tools when designing cards, hero modules, and controls.

Button, card, and modal previews cover the most common surfaces without overcomplicating the interface.

Saved shadows make it practical to build a small visual language instead of tweaking from scratch every time.