Reshaped supports three shadow tokens that demonstrate the level of component elevation. It's better to apply them on a pseudo-element rather than the element itself to make sure it renders on top of the border outline. For better developer experience, we recommend using View or Card components that implement the outline out of the box.
--rs-shadow-outline is used by most of the components in addition to their neutral border for better outline visuals.
--rs-shadow-raised is used for elements that are slightly elevated compared to other elements, like raised Card.
--rs-shadow-overlay is used for elements displayed on top of other elements, like in DropdownMenu.
When using the same shadows for colored backgrounds, shadows have to be stronger to match the contrast ratio of the background color. Use the same shadow tokens with -intense suffix to make them stronger.
var(--rs-shadow-outline-intense); var(--rs-shadow-raised-intense); var(--rs-shadow-overlay-intense)