Elevation - MudBlazor

Usage

Displayed 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, or shadow can be set.
The same elevation types can be used with our predefined CSS classes.

<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 Elevation Property takes the range betwen 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>