MudBlazor

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

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
Hide code example
Edit on TryMudBlazor
Copy Code
<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
Show code example
Edit on TryMudBlazor
Copy Code
<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 🗙