Shadows

Shadow tokens lift surfaces off the page by a consistent amount across the design system.

Use the semantic shadow tokens, --nbhd-shadow-*, in your CSS. Each one points to the matching step of the base scale (--nbhd-shadow-md → --nbhd-base-shadow-md). Components use the same tokens.

Shadows lift surfaces such as cards, menus and dialogs off the page. Use lg-reverse when the light source should come from the other side.

.menu {
  box-shadow: var(--nbhd-shadow-md);
}

Properties

Token	CSS Variable	Value
`shadow.none`	`var(--nbhd-shadow-none)`	`none`
`shadow.sm`	`var(--nbhd-shadow-sm)`	`-4px 2px 16px 3px rgb(from #000000 r g b / 0.15)`
`shadow.md`	`var(--nbhd-shadow-md)`	`-6px 3px 25px 8px rgb(from #000000 r g b / 0.15)`
`shadow.lg`	`var(--nbhd-shadow-lg)`	`-20px 10px 20px rgb(from #000000 r g b / 0.15)`
`shadow.lg-reverse`	`var(--nbhd-shadow-lg-reverse)`	`20px 10px 20px rgb(from #000000 r g b / 0.15)`
`shadow.lg-reversed`	`var(--nbhd-shadow-lg-reversed)`	`20px 10px 20px rgb(from #000000 r g b / 0.15)`