---
meta:
    title: Elevation
    description: Elevation tokens are used to give elements the appearance of being raised off the page.
---

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