Shadows

Shadows indicate elevation and, often, interactivity. Web Awesome offers highly modular shadow properties to easily create custom shadow effects or transform elements based on specific shadow qualities. Together with --wa-color-shadow, these tokens create realistic shadows for Web Awesome components.

Shadows are constructed using corresponding offset-x, offset-y, blur, and spread properties, detailed in the sections below. In Web Awesome, shadows use a size-based scale where larger shadows have greater offset and blur values to indicate greater distance from the surface below.

Any shadow may be implemented as an inner box shadow using the inset keyword, e.g. box-shadow: inset var(--wa-shadow-s);.

Horizontal Offset (X) Jump to heading #

Each offset-x property uses a calc() function with --wa-shadow-offset-x-scale to uniformly scale horizontal offset values. By default, this multiplier is 0. The table below lists the result of the calculation.

Vertical Offset (Y) Jump to heading #

Each offset-y property uses a calc() function with --wa-shadow-offset-y-scale to uniformly scale vertical offset values. By default, this multiplier is 1. The table below lists the result of the calculation.

Blur Jump to heading #

Each blur property uses a calc() function with --wa-shadow-blur-scale to uniformly scale blur values. By default, this multiplier is 1. The table below lists the result of the calculation.

Spread Jump to heading #

Each spread property uses a calc() function with --wa-shadow-spread-scale to uniformly scale spread values. By default, this multiplier is -0.5. The table below lists the result of the calculation.