Header

Box Shadow

Used to set box shadow attributes.

Class Reference

Class
Output
.elevation-0
box-shadow: 0;
.elevation-1
box-shadow:

(0 1px 3px 0 rgba(0, 0, 0, 0.1),

0 1px 2px 0 rgba(0, 0, 0, 0.06));
.elevation-2
box-shadow:

(0 4px 6px -1px rgba(0, 0, 0, 0.1),

0 2px 4px -1px rgba(0, 0, 0, 0.06));
.elevation-3
box-shadow:

(0 10px 15px -3px rgba(0, 0, 0, 0.1),

0 4px 6px -2px rgba(0, 0, 0, 0.05));
.elevation-4
box-shadow:

(0 20px 25px -5px rgba(0, 0, 0, 0.1),

0 10px 10px -5px rgba(0, 0, 0, 0.04));
.elevation-5
box-shadow:

0 25px 50px -12px rgba(0, 0, 0, 0.25)

Example

No Box Shadow
Box Shadow 1
Box Shadow 2
Box Shadow 3
Box Shadow 4
Box Shadow 5
<div className="elevation-0">No Box Shadow</div>
<div className="elevation-1">Box Shadow 1</div>
<div className="elevation-2">Box Shadow 2</div>
<div className="elevation-3">Box Shadow 3</div>
<div className="elevation-4">Box Shadow 4</div>
<div className="elevation-5">Box Shadow 5</div>

Hover state

Change the amount of box shadow on an element on hover. The syntax is : .hover:elevation-{value}.

Example

Box Shadow 4 on Hover
<div class="hover:elevation-4">Box Shadow 4</div>
←Back to: Border
See next: Box-Sizing→

Jump to