Design Tokens Shadows

Shadows

Shadow tokens indicate elevation and, often, interactivity. Web Awesome provides three size-based shadow shorthands built from modular offset, blur, and spread tokens. Together with --wa-color-shadow, these tokens create realistic drop shadows.

Larger shadows have greater offset and blur values to suggest greater distance from the surface below. Any shadow can also be used as an inner shadow with the inset keyword, e.g. box-shadow: inset var(--wa-shadow-s).

Custom Property	Description	Preview
--wa-shadow-s	Small shadow for subtle elevation (e.g., cards, inputs)
--wa-shadow-m	Medium shadow for moderate elevation (e.g., dropdowns, popovers)
--wa-shadow-l	Large shadow for high elevation (e.g., dialogs, drawers)

Horizontal Offset (X)

Link to This Section

Offset-x tokens control a shadow's horizontal position relative to the element. Use --wa-shadow-offset-x-scale to change all offset-x tokens at once.

Custom Property	Description
--wa-shadow-offset-x-scale	Global multiplier for horizontal shadow offset
--wa-shadow-offset-x-s	Small horizontal shadow offset
--wa-shadow-offset-x-m	Medium horizontal shadow offset
--wa-shadow-offset-x-l	Large horizontal shadow offset

Vertical Offset (Y)

Link to This Section

Offset-y tokens control a shadow's vertical position relative to the element. Use --wa-shadow-offset-y-scale to change all offset-y tokens at once.

Custom Property	Description
--wa-shadow-offset-y-scale	Global multiplier for vertical shadow offset
--wa-shadow-offset-y-s	Small vertical shadow offset
--wa-shadow-offset-y-m	Medium vertical shadow offset
--wa-shadow-offset-y-l	Large vertical shadow offset

Blur

Link to This Section

Blur tokens control how soft or sharp the shadow edge is. Use --wa-shadow-blur-scale to change all blur tokens at once.

Custom Property	Description
--wa-shadow-blur-scale	Global multiplier for shadow blur radius. Also affects --wa-color-shadow opacity.
--wa-shadow-blur-s	Small shadow blur radius
--wa-shadow-blur-m	Medium shadow blur radius
--wa-shadow-blur-l	Large shadow blur radius

Spread

Link to This Section

Spread tokens expand or contract the shadow shape. A negative spread (the default) contracts the shadow inward for a more natural look. Use --wa-shadow-spread-scale to change all spread tokens at once.

Custom Property	Description
--wa-shadow-spread-scale	Global multiplier for shadow spread. Negative values contract the shadow inward.
--wa-shadow-spread-s	Small shadow spread
--wa-shadow-spread-m	Medium shadow spread
--wa-shadow-spread-l	Large shadow spread