Skip to main content

Elevation and shadows

Material defines a model of elevation and shadows that can be applied consistently across apps.

All the available elevation and shadow variables are defined in daemonite-material/assets/scss/variables/_elevation-shadow.scss. This page summarises the default elevation and shadow values used by Material components.

Elevation

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

Several Material components utilise z-index, the CSS property that helps control layout by providing a third axis to arrange content. A default z-index scale in Material has been designed to properly layer dialogs, navdrawers, toolbars, and more.

Component (class) Elevation (z-index)
Dialog (.modal) map-get($elevations, 24) (z-index: 240;)
Picker (.picker) map-get($elevations, 24) (z-index: 240;)
Popover & tooltip (.popover & .tooltip) map-get($elevations, 24) (z-index: 240;)
Navigation drawer (.navdrawer) map-get($elevations, 16) (z-index: 160;)
Menu (.dropdown-menu) map-get($elevations, 8) (z-index: 80;)
Snackbar (.snackbar) map-get($elevations, 6) (z-index: 60;)
Toolbar (.navbar) map-get($elevations, 4) (z-index: 40;)

Shadows

Shadows provide important visual cues about objects’ depth.

Most Material components have default shadows applied:

Component (class) Shadow
Dialog (.modal-content) map-get($shadows, 24)
Picker (.picker-wrap) map-get($shadows, 24)
Popover (.popover) map-get($shadows, 24)
Navigation drawer (.navdrawer-content) map-get($shadows, 16)
Carousel control pressed (.carousel-control-next:active & .carousel-control-prev:active) map-get($shadows, 12)
Floating action button pressed (.btn-float:active) map-get($shadows, 12)
Card pressed (.card:active) map-get($shadows, 8)
Menu (.dropdown-menu) map-get($shadows, 8)
Raised button pressed (.btn:active) map-get($shadows, 8)
Carousel control (.carousel-control-next & .carousel-control-prev) map-get($shadows, 6)
Floating action button (.btn-float) map-get($shadows, 6)
Snackbar (.snackbar) map-get($shadows, 6)
Toolbar (.navbar) map-get($shadows, 4)
Card (.card) map-get($shadows, 2)
Chip hovered (.chip:hover) map-get($shadows, 2)
Jumbotron (.jumbotron) map-get($shadows, 2)
Raised button (.btn) map-get($shadows, 2)
Expansion panel (.expansion-panel) map-get($shadows, 1)
Switch (.custom-switch .custom-control-label::after) map-get($shadows, 1)

Shadow utility classes

Material also provides utility classes to quickly add or remove a shadow for any componenet/element.

0 shadow
1 shadow
2 shadow
4 shadow
6 shadow
8 shadow
12 shadow
16 shadow
24 shadow
<div class="bg-light mb-3 p-3 rounded shadow-none"><code>0</code> shadow</div>
<div class="bg-white mb-3 p-3 rounded shadow-1"><code>1</code> shadow</div>
<div class="bg-white mb-3 p-3 rounded shadow-2"><code>2</code> shadow</div>
<div class="bg-white mb-3 p-3 rounded shadow-4"><code>4</code> shadow</div>
<div class="bg-white mb-3 p-3 rounded shadow-6"><code>6</code> shadow</div>
<div class="bg-white mb-3 p-3 rounded shadow-8"><code>8</code> shadow</div>
<div class="bg-white mb-3 p-3 rounded shadow-12"><code>12</code> shadow</div>
<div class="bg-white mb-3 p-3 rounded shadow-16"><code>16</code> shadow</div>
<div class="bg-white p-3 rounded shadow-24"><code>24</code> shadow</div>