Shadows

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

These are constructed using the corresponding x‐offset, y‐offset, blur and spread properties, detailed in the sections below. In Placer Toolkit, 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(--pc-shadow-m).

Horizontal offset (X‐offset)#

Each x‐offset property uses a calc() function with --pc-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‐offset)#

Each y‐offset property uses a calc() function with --pc-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#

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

Spread#

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