> Markdown version of [Elevation](https://vaadin.com/docs/latest/styling/themes/lumo/lumo-style-properties/elevation). Section index: [llms.txt](https://vaadin.com/docs/latest/styling/llms.txt)

# Lumo Elevation

`lumo-tokens.ts`

```typescript
import colorScheme from '@vaadin/vaadin-lumo-styles/src/global/color-scheme.css?inline';
import propsStyles from '@vaadin/vaadin-lumo-styles/src/props/index.css?inline';
import utilityStyles from '@vaadin/vaadin-lumo-styles/utility.css?inline';
import { addStylesheet } from 'Frontend/demo/theme';

// Extract dark theme properties. Exclude non-custom properties, so that we don't override docs
// styles (color, background) with Lumo styles.
// eslint-disable-next-line @typescript-eslint/no-base-to-string
const darkThemeProps = colorScheme
  .toString()
  .split('\n')
  .filter((line) => line.trim().startsWith('--'));
const darkThemeStyles = `
[theme~='dark'] {
${darkThemeProps.join('\n')}
}
`;

// Include styles in the page
addStylesheet(propsStyles);
addStylesheet(utilityStyles);
addStylesheet(darkThemeStyles);

// Notify DSP CustomPropertyPreview React component after custom properties have been loaded
window.dispatchEvent(new CustomEvent('custom-properties-changed'));

// Dummy element so that this module can be included as a rendered example in a docs page
export default class LumoTokens extends HTMLElement {}
```

Elevation is used to signify elements which are stacked on top of other elements in the UI. This page lists Lumo elevation-related style properties, which you can use to create visually consistent elevation styles.

Lumo includes different levels of elevation that are applied using box-shadow.

| Description                                                                                                                 | CSS Custom Property  |
| --------------------------------------------------------------------------------------------------------------------------- | -------------------- |
| **Extra Large** Elements highest in the stacking order, for example notifications, which should be above all other content. | --lumo-box-shadow-xl |
| **Large** Elements that rise above most elements in the UI, for example dialogs.                                            | --lumo-box-shadow-l  |
| **Medium** Contextual overlays, for components such as Select and Menu Bar.                                                 | --lumo-box-shadow-m  |
| **Small** Tooltips, etc.                                                                                                    | --lumo-box-shadow-s  |
| **Extra Small** Elements closest to the application background, for example cards.                                          | --lumo-box-shadow-xs |

`F3F9FE20-3BA3-4A6C-A559-DD8C7DD91E13`