Elevation is used to indicate elements which are stacked on top of other elements in the UI. Use these CSS custom properties to create visually consistent elevation styles.

Only available in Lumo
This documentation applies only to the Lumo theme.


In server-side views (Flow/Java), the custom properties are imported automatically.

In client-side views (Fusion/TypeScript), you need to explicitly import the custom properties before you can use them in your style sheets.

import '@vaadin/vaadin-lumo-styles/style';

Learn how to use CSS Custom Properties.

Box Shadow

Different levels of elevation are applied using box-shadow.

DescriptionCSS Custom Property

Extra Large
Elements highest in the stacking order, for example notifications, which should be above all other content.


Elements that rise above most elements in the UI, for example dialogs.


Contextual overlays, for components such as Select and Menu Bar.


Tooltips, etc.


Extra Small
Elements closest to the application background, for example cards.