Vue.js

Appearance

On this page

Elevation ​

Elevation is the relative distance between two surfaces along the z-axis.

Material's elevation system is deliberately limited to just a handful of levels. This creative constraint means you need to make thoughtful decisions about your UI’s elevation story.

Usage ​

Elevation can be set from 0 to 5 using the --md-elevation-level CSS custom property. The elevation will automatically fill the nearest position: relative element's size and shape.

A rounded square with a drop shadow beneath it.

html
<style>
  .surface {
    position: relative;
    border-radius: 16px;
    height: 64px;
    width: 64px;

    --md-elevation-level: 3;
  }
</style>
<div class="surface">
  <md-elevation></md-elevation>
  <!-- Content -->
</div>

Animation ​

Shadows may be animated between levels by adding transition-duration and transition-easing-function CSS properties.

A rounded square with a drop shadow beneath it. After a moment, the square lowers into the background and the shadow disappears, then repeats.

html
<style>
  .surface {
    /* ... */
    transition-duration: 250ms;
    transition-timing-function: ease-in-out;

    --md-elevation-level: 3;
  }

  .surface:active {
    --md-elevation-level: 0;
  }
</style>
<div class="surface">
  <md-elevation></md-elevation>
  <!-- Content -->
</div>

Accessibility ​

Elevation is a visual component and does not have accessibility concerns.

Theming ​

Elevation supports Material theming and can be customized in terms of color.

Tokens ​

TokenDefault value
--md-elevation-level0
--md-elevation-shadow-color--md-sys-color-shadow

Example ​

Image of an elevation surface with a different theme applied

html
<style>
  .surface {
    position: relative;
    border-radius: 16px;
    height: 64px;
    width: 64px;
  }

  :root {
    --md-elevation-level: 5;
    --md-sys-color-shadow: #006A6A;
  }
</style>
<div class="surface">
  <md-elevation></md-elevation>
  <!-- Content -->
</div>

Edit this page on GitHub