Shadow

Shadows let you add depth and realism to designs by placing elements on a z-axis.

Shadow (XS)

Blur: 2, Y: 1, Op: 5%

.box-shadow-xm

Shadow (SM)

Blur: 4, Y: 2, Op: 10%

.box-shadow-sm

Shadow (MD)

Blur: 6, Y: 3, Op: 15%

.box-shadow-md

Shadow (LG)

Blur: 8, Y: 4, Op: 20%

.box-shadow-lg

Shadow (XL)

Blur: 10, Y: 5, Op: 25%

.box-shadow-xl

Shadow (2XL)

Blur: 12, Y: 6, Op: 30%

.box-shadow-2xl

Shadow (3XL)

Blur: 14, Y: 7, Op: 35%

.box-shadow-3xl