MudBlazor

Elevation

Elevation is the relative distance between two surfaces along the z-axis. What this means in practice is that you can use a shadow on a material surface to elevate it from another material surface visually.

Usage

Below, we are using different levels of elevation in two different ways. All our components that have elevation also have the Elevation property where the elevation level (shadow) can be set.
The same elevation types can be used with our predefined CSS classes.

0
1
4
0
1
4
<MudPaper Elevation="0" Class="py-8 px-10">0</MudPaper>
<MudPaper Elevation="1" Class="py-8 px-10">1</MudPaper>
<MudPaper Elevation="4" Class="py-8 px-10">4</MudPaper>

<div class="mud-elevation-0 py-8 px-10 rounded white">0</div>
<div class="mud-elevation-1 py-8 px-10 rounded white">1</div>
<div class="mud-elevation-4 py-8 px-10 rounded white">4</div>

Elevation Levels

Every component that has the Elevation property takes values in the range of 0 - 25, or you can access them with the CSS classes displayed below.

.mud-elevation-0
.mud-elevation-1
.mud-elevation-2
.mud-elevation-3
.mud-elevation-4
.mud-elevation-5
.mud-elevation-6
.mud-elevation-7
.mud-elevation-8
.mud-elevation-9
.mud-elevation-10
.mud-elevation-11
.mud-elevation-12
.mud-elevation-13
.mud-elevation-14
.mud-elevation-15
.mud-elevation-16
.mud-elevation-17
.mud-elevation-18
.mud-elevation-19
.mud-elevation-20
.mud-elevation-21
.mud-elevation-22
.mud-elevation-23
.mud-elevation-24
.mud-elevation-25
<MudPaper Elevation="0" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-0</MudPaper>
<MudPaper Elevation="1" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-1</MudPaper>
<MudPaper Elevation="2" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-2</MudPaper>
<MudPaper Elevation="3" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-3</MudPaper>
<MudPaper Elevation="4" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-4</MudPaper>
<MudPaper Elevation="5" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-5</MudPaper>
<MudPaper Elevation="6" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-6</MudPaper>
<MudPaper Elevation="7" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-7</MudPaper>
<MudPaper Elevation="8" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-8</MudPaper>
<MudPaper Elevation="9" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-9</MudPaper>
<MudPaper Elevation="10" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-10</MudPaper>
<MudPaper Elevation="11" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-11</MudPaper>
<MudPaper Elevation="12" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-12</MudPaper>
<MudPaper Elevation="13" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-13</MudPaper>
<MudPaper Elevation="14" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-14</MudPaper>
<MudPaper Elevation="15" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-15</MudPaper>
<MudPaper Elevation="16" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-16</MudPaper>
<MudPaper Elevation="17" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-17</MudPaper>
<MudPaper Elevation="18" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-18</MudPaper>
<MudPaper Elevation="19" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-19</MudPaper>
<MudPaper Elevation="20" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-20</MudPaper>
<MudPaper Elevation="21" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-21</MudPaper>
<MudPaper Elevation="22" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-22</MudPaper>
<MudPaper Elevation="23" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-23</MudPaper>
<MudPaper Elevation="24" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-24</MudPaper>
<MudPaper Elevation="25" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-25</MudPaper>
An error has occurred. This application may no longer respond until reloaded. Reload 🗙