Box Shadows / Elevations

Box shadows and elevations are implemented as box shadow utility classes in the design system.

Class	Description
.shadow-0	No Elevation
.shadow-1	1dp — Elevation
.shadow-2	2dp — Elevation
.shadow-3	3dp — Elevation
.shadow-4	4dp — Elevation
.shadow-6	6dp — Elevation
.shadow-8	8dp — Elevation
.shadow-9	9dp — Elevation
.shadow-12	12dp — Elevation
.shadow-16	16dp — Elevation
.shadow-24	14dp — Elevation
.shadow-drop	Sharp box shadow

Examples

0dp

1dp

2dp

3dp

4dp

6dp

8dp

9dp

12dp

16dp

24dp

Drop Shadow

<div class="py-12 text-center rounded-lg shadow-0">0dp</div>
<div class="py-12 text-center rounded-lg shadow-1">1dp</div>
<div class="py-12 text-center rounded-lg shadow-2">2dp</div>
<div class="py-12 text-center rounded-lg shadow-3">3dp</div>
<div class="py-12 text-center rounded-lg shadow-4">4dp</div>
<div class="py-12 text-center rounded-lg shadow-6">6dp</div>
<div class="py-12 text-center rounded-lg shadow-8">8dp</div>
<div class="py-12 text-center rounded-lg shadow-9">9dp</div>
<div class="py-12 text-center rounded-lg shadow-12">12dp</div>
<div class="py-12 text-center rounded-lg shadow-16">16dp</div>
<div class="py-12 text-center rounded-lg shadow-24">24dp</div>
<div class="py-12 text-center rounded border shadow-drop">Drop Shadow</div>