Shadow

Add or remove shadows to elements with Bootstrap's shadow utility classes.

Shadow Sizes

No shadow

.shadow-none

Small shadow

.shadow-sm

Regular shadow

.shadow

Large shadow

.shadow-lg 
							<div class="shadow-none">No shadow</div>
<div class="shadow-sm">Small shadow</div>
<div class="shadow">Regular shadow</div>
<div class="shadow-lg">Large shadow</div>

Shadow on Cards

shadow-sm

shadow

shadow-lg

							<div class="card shadow-sm">...</div>
<div class="card shadow">...</div>
<div class="card shadow-lg">...</div>

Shadow on Buttons

							<button class="btn btn-primary shadow-none">No shadow</button>
<button class="btn btn-primary shadow-sm">Small shadow</button>
<button class="btn btn-primary shadow">Shadow</button>
<button class="btn btn-primary shadow-lg">Large shadow</button>

Shadow CSS Variables

Class CSS Property
.shadow-none box-shadow: none
.shadow-sm box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)
.shadow box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)
.shadow-lg box-shadow: 0 1rem 3rem rgba(0,0,0,.175)