Tools
CSS Box-Shadow Generator
Stack multiple shadow layers for realistic, soft depth. Tune offset, blur, spread and color, flip to inset, and copy the CSS. Everything runs in your browser.
Examples from real themes
The shadow scale each CSS Crème theme installs, four of its seven steps, in the
theme's own default mode. Click any swatch to copy the exact box-shadow. These are the same values
npx shadcn add writes into globals.css, not examples drawn for this page.
About box-shadow
The box-shadow property paints one or more shadows around an element's frame. Each layer is
x y blur spread color: positive y drops the shadow downward, blur
softens the edge, and spread grows or shrinks the shadow before blurring.
The secret to shadows that look real is stacking several low-opacity layers instead of
one harsh one: a tight, dark layer for contact plus a wide, faint layer for ambient light. Add
inset to carve the shadow inward for pressed buttons and inner wells.
Building a card? Give it a gradient from the gradient generator, then layer these shadows on top.