Shadows
Shadows simulate elevation and depth by adding soft or sharp outlines around elements.
Box shadow
Use shadow-* utilities to apply different elevation levels to elements.
.shadow-none.shadow-2xs.shadow-xs.shadow-sm.shadow-md.shadow-lg.shadow-xl.shadow-2xl.shadow-2xl/5.shadow-2xl/10HTML
<div class="shadow-none"><code>.shadow-none</code></div>
<div class="shadow-2xs"><code>.shadow-2xs</code></div>
<div class="shadow-xs"><code>.shadow-xs</code></div>
<div class="shadow-sm"><code>.shadow-sm</code></div>
<div class="shadow-md"><code>.shadow-md</code></div>
<div class="shadow-lg"><code>.shadow-lg</code></div>
<div class="shadow-xl"><code>.shadow-xl</code></div>
<div class="shadow-2xl"><code>.shadow-2xl</code></div>
<div class="shadow-2xl/5"><code>.shadow-2xl/5</code></div>
<div class="shadow-2xl/10"><code>.shadow-2xl/10</code></div>Shadow color
Combine shadow-* with shadow-{color} or shadow-{color}/{opacity} utilities to tint shadows.
HTML
<div class="shadow-sm shadow-primary-light/50 bg-primary-lighter"></div>
<div class="shadow-sm shadow-secondary-light/50 bg-secondary-lighter"></div>
<div class="shadow-sm shadow-info-light/50 bg-info-lighter"></div>
<div class="shadow-sm shadow-success-light/50 bg-success-lighter"></div>
<div class="shadow-sm shadow-warning-light/50 bg-warning-lighter"></div>
<div class="shadow-sm shadow-danger-light/50 bg-danger-lighter"></div>Shadow on hover
Use hover:shadow-* and hover:shadow-{color} utilities to add elevation on interaction.
HTML
<div class="hover:shadow-sm hover:shadow-primary-light/50 bg-primary-lighter"></div>
<div class="hover:shadow-sm hover:shadow-secondary-light/50 bg-secondary-lighter"></div>
<div class="hover:shadow-sm hover:shadow-info-light/50 bg-info-lighter"></div>
<div class="hover:shadow-sm hover:shadow-success-light/50 bg-success-lighter"></div>
<div class="hover:shadow-sm hover:shadow-warning-light/50 bg-warning-lighter"></div>
<div class="hover:shadow-sm hover:shadow-danger-light/50 bg-danger-lighter"></div>Inset shadow
Apply inset-shadow-* utilities to create inner shadows.
HTML
<div class="inset-shadow-sm inset-shadow-primary-light/50 bg-primary-lighter"></div>
<div class="inset-shadow-sm inset-shadow-secondary-light/50 bg-secondary-lighter"></div>
<div class="inset-shadow-sm inset-shadow-info-light/50 bg-info-lighter"></div>
<div class="inset-shadow-sm inset-shadow-success-light/50 bg-success-lighter"></div>
<div class="inset-shadow-sm inset-shadow-warning-light/50 bg-warning-lighter"></div>
<div class="inset-shadow-sm inset-shadow-danger-light/50 bg-danger-lighter"></div>Ring
Use ring-* utilities to draw an outline around elements without changing their size.
HTML
<div class="ring-2 ring-primary-light/50 bg-primary-lighter"></div>
<div class="ring-2 ring-secondary-light/50 bg-secondary-lighter"></div>
<div class="ring-2 ring-info-light/50 bg-info-lighter"></div>
<div class="ring-2 ring-success-light/50 bg-success-lighter"></div>
<div class="ring-2 ring-warning-light/50 bg-warning-lighter"></div>
<div class="ring-2 ring-danger-light/50 bg-danger-lighter"></div>Drop shadow
Use drop-shadow-* utilities to apply shadows to the rendered shape of content.
drop-shadow-md
drop-shadow-lg
drop-shadow-xl
drop-shadow-2xl
drop-shadow-2xl/25
drop-shadow-2xl/50
<svg class="fill-white drop-shadow-md ...">...</svg>
<svg class="fill-white drop-shadow-lg ...">...</svg>
<svg class="fill-white drop-shadow-xl ...">...</svg>
<svg class="fill-white drop-shadow-2xl ...">...</svg>
<svg class="fill-white drop-shadow-2xl/25 ...">...</svg>
<svg class="fill-white drop-shadow-2xl/50 ...">...</svg>Shadow color
Combine drop-shadow-* with drop-shadow-{color} utilities to tint the shadow.
drop-shadow-primary-light
drop-shadow-secondary-light
drop-shadow-info-light
drop-shadow-success-light
drop-shadow-warning-light
drop-shadow-danger-light
<svg class="drop-shadow-2xl drop-shadow-primary-light fill-primary-light ...">...</svg>
<svg class="drop-shadow-2xl drop-shadow-secondary-light fill-secondary-light ...">...</svg>
<svg class="drop-shadow-2xl drop-shadow-info-light fill-info-light ...">...</svg>
<svg class="drop-shadow-2xl drop-shadow-success-light fill-success-light ...">...</svg>
<svg class="drop-shadow-2xl drop-shadow-warning-light fill-warning-light ...">...</svg>
<svg class="drop-shadow-2xl drop-shadow-danger-light fill-danger-light ...">...</svg>Shadow on hover
Use hover:drop-shadow-* and hover:drop-shadow-{color} utilities to apply drop shadows on interaction.
drop-shadow-primary-light
drop-shadow-secondary-light
drop-shadow-info-light
drop-shadow-success-light
drop-shadow-warning-light
drop-shadow-danger-light
<svg class="drop-shadow-2xl drop-shadow-primary-light fill-primary-light ...">...</svg>
<svg class="drop-shadow-2xl drop-shadow-secondary-light fill-secondary-light ...">...</svg>
<svg class="drop-shadow-2xl drop-shadow-info-light fill-info-light ...">...</svg>
<svg class="drop-shadow-2xl drop-shadow-success-light fill-success-light ...">...</svg>
<svg class="drop-shadow-2xl drop-shadow-warning-light fill-warning-light ...">...</svg>
<svg class="drop-shadow-2xl drop-shadow-danger-light fill-danger-light ...">...</svg>