Shadows

Add or remove shadows to elements with box-shadow utilities.

Examples

.shadow-sm

.shadow

.shadow-md

.shadow-lg

.shadow-xl

.shadow-none

<div class="shadow-sm bg-white rounded-2 d-flex align-items-center justify-content-center demo-box-lg"><span>.shadow-sm</span></div>
<div class="shadow bg-white rounded-2 d-flex align-items-center justify-content-center demo-box-lg"><span>.shadow</span></div>
<div class="shadow-md bg-white rounded-2 d-flex align-items-center justify-content-center demo-box-lg"><span>.shadow-md</span></div>
<div class="shadow-lg bg-white rounded-2 d-flex align-items-center justify-content-center demo-box-lg"><span>.shadow-lg</span></div>
<div class="shadow-xl bg-white rounded-2 d-flex align-items-center justify-content-center demo-box-lg"><span>.shadow-xl</span></div>
<div class="shadow-none bg-white border rounded-2 d-flex align-items-center justify-content-center demo-box-lg"><span>.shadow-none</span></div>

Available values

Class	Effect
`.shadow-none`	No shadow
`.shadow-sm`	Small `.05` alpha shadow
`.shadow` / `.shadow-base`	Base shadow
`.shadow-md`	Medium
`.shadow-lg`	Large
`.shadow-xl` / `.shadow-2xl`	Extra large
`.shadow-inner`	Inset

Use .shadow-sm … .shadow-xl for responsive variants as well (.shadow-lg default, .shadow-md on large screens, etc.).

Material elevation

For Material Design depths from 0–5, use the elevation helpers: .elevation-0 through .elevation-5.

<div class="elevation-3">Elevated</div>