Elevation tokens

Elevation tokens are used to give elements the appearance of being raised off the page. Use them with the box-shadow property. These are especially useful for menus, popovers, and dialogs.

Token Value Example
--gr-shadow-x-small 0 1px 0 #0d131e0d
--gr-shadow-small 0 1px 2px #0d131e1a
--gr-shadow-medium 0 2px 4px #0d131e1a
--gr-shadow-large 0 2px 8px #0d131e1a
--gr-shadow-x-large 0 4px 16px #0d131e1a