Box-shadow generator
Visually craft a CSS box-shadow with live preview and copy the code. Offset, blur, spread, color and inset.
box-shadow: 0px 8px 24px -6px rgba(0, 0, 0, 0.25);About this box-shadow generator
Craft a CSS box-shadow visually: drag sliders for horizontal/vertical offset,
blur and spread, pick a color, and toggle inset. The preview updates live and
the exact declaration is ready to copy.
Tips for realistic shadows
Real shadows are soft and subtle. Use a fairly large blur, a small or negative
spread, and a low-opacity color (rgba(0,0,0,0.15)) rather than solid black.
Layering two or three shadows — a tight one plus a wide, faint one — looks far
more natural than a single hard shadow.
FAQ
What does spread do?
Positive spread grows the shadow in every direction before the blur is applied; negative spread shrinks it, which is handy for soft, lifted shadows.
What is an inset shadow?
Inset draws the shadow inside the element instead of outside it, used for pressed buttons and inner-glow effects.