Shadow tokens help with communicating component elevation along the z-axis.

UIC supports two shadow tokens that demonstrate the level of elevation of the component.

/* Usage */
.element {
box-shadow: var(--uic-shadow-base);

Base shadow is used to elevate the elements that initially don't have any elevation, for example, in elevated Card. Elevated shadow is used for elements that are displayed on top of other elements, like in DropdownMenu.

Shadows are usually used with base and elevated background color tokens: --uic-color-background-base and --uic-color-background-elevated. Since shadows are less prominent in dark mode, these color tokens will adjust the element's background color to communicate the elevation to the user.