Shadow

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

--rs-shadow-raised
--rs-shadow-overlay

/* Usage */
.element {
  box-shadow: var(--rs-shadow-raised);
}

• Raised shadow is used to elevate elements that initially don't have any elevation, for example, an elevated Card.
• Overlay shadow is used for elements displayed on top of other elements, like in a DropdownMenu.

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