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	Example
--sl-shadow-x-small	<div class="elevation-demo" style="box-shadow: var(--sl-shadow-x-small);"></div>
--sl-shadow-small	<div class="elevation-demo" style="box-shadow: var(--sl-shadow-small);"></div>
--sl-shadow-medium	<div class="elevation-demo" style="box-shadow: var(--sl-shadow-medium);"></div>
--sl-shadow-large	<div class="elevation-demo" style="box-shadow: var(--sl-shadow-large);"></div>
--sl-shadow-x-large	<div class="elevation-demo" style="box-shadow: var(--sl-shadow-x-large);"></div>