Shadows create depth hierarchy — the difference between flat and premium UI. Copy these; each is production-tested.
/* 1. Subtle card */ box-shadow: 0 1px 3px rgba(0,0,0,.12); /* 2. Elevated card (layered = realistic) */ box-shadow: 0 4px 6px rgba(0,0,0,.07), 0 10px 24px rgba(0,0,0,.1); /* 3. Floating modal */ box-shadow: 0 24px 64px rgba(0,0,0,.25); /* 4. Inner highlight (glass edge) */ box-shadow: inset 0 1px 0 rgba(255,255,255,.1); /* 5. Focus ring (accessible buttons) */ box-shadow: 0 0 0 3px rgba(109,111,251,.4); /* 6. Colored brand shadow */ box-shadow: 0 8px 24px rgba(109,111,251,.35); /* 7. Neon glow */ box-shadow: 0 0 8px #6d6ffb, 0 0 32px rgba(109,111,251,.6); /* 8. Pressed/inset button */ box-shadow: inset 0 2px 6px rgba(0,0,0,.3);
Pro rules
- Layer 2–3 shadows (small sharp + large soft) — single shadows look fake
- Never pure black: use low-opacity black or a darker shade of the background hue
- Animate shadow on hover WITH transform for the "lift" effect — see it on every card of this site
Test them live in the Playground.
← All Articles