Elevation is the relative distance between two surfaces along the z-axis. Shadows and blurs create a layered effect that visually indicates that an object is "elevated" in priority or hierarchy.


In the Appwrite console we use two types of elevation:

Variable Type
shadow-small Small Used to show contrast between layout elements, such as cards or tables, and their parent component.
shadow-large Large Used to show contrast between ‘floating’ components, such as popovers, alerts or modals, and the components below.



<div class="card" style="box-shadow:var(--shadow-small);">
  <p class="text u-margin-block-start-8">shadow-small</p>
<div class="card" style="box-shadow:var(--shadow-large);">
  <p class="text u-margin-block-start-8">shadow-large</p>

Best Practice

Small shadows should be used with standard layout components (e.g. cards, tables).

 table layout
 table layout

We recommend the use of a large drop-shadow for floating components (e.g. popovers, alerts, modals).

 large shadow
 large shadow


To create contrast between a floating surface and the surface beneath, use shadow-large.

 no shadow
 no shadow


Do not make floating elements look flat by not using shadows.