Shadows
Use our utilities to quickly style almost any element. Great for text, images, buttons, or any other element.
Shadow Basic
.shadow-none No shadow.shadow-soft Soft Shadow.shadow-xs Extra small shadow.shadow-sm Small shadow.shadow Medium/Default Shadow.shadow-lg Large Shadow.shadow-xl Extra Large Shadow.shadow-top Shadow Top.shadow-bottom Shadow Bottom
<div class="rounded shadow-none p-3 mb-3">No shadow</div>
<div class="rounded shadow-soft p-3 mb-5">Soft Shadow</div>
<div class="rounded shadow-xs p-3 mb-5">Extra small shadow</div>
<div class="rounded shadow-sm p-3 mb-5">Small shadow</div>
<div class="rounded shadow p-3 mb-5">Medium/Default Shadow</div>
<div class="rounded shadow-lg p-3 mb-5">Large Shadow</div>
<div class="rounded shadow-xl p-3 mb-5">Extra Large Shadow</div>
<div class="rounded shadow-top p-3 mb-5">Shadow Top</div>
<div class="rounded shadow-bottom p-3 mb-5">Shadow Bottom</div>
Shadow Color
.shadow-primary-soft Primary.shadow-secondary-soft Secondary.shadow-success-soft Success.shadow-danger-soft Danger.shadow-warning-soft Warning.shadow-info-soft Info.shadow-light-soft Light.shadow-dark-soft Dark.shadow-xs-primary Primary extra small.shadow-sm-primary Primary small.shadow-primary Primary medium.shadow-lg-primary Primary large.shadow-xl-primary Primary extra large
<div class="rounded shadow-soft-primary p-3 mb-4">Primary</div>
<div class="rounded shadow-soft-secondary p-3 mb-4">Secondary</div>
<div class="rounded shadow-soft-success p-3 mb-4">Success</div>
<div class="rounded shadow-soft-danger p-3 mb-4">Danger</div>
<div class="rounded shadow-soft-warning p-3 mb-4">Warning</div>
<div class="rounded shadow-soft-info p-3 mb-4">Info</div>
<div class="rounded shadow-soft-light p-3 mb-4">Light</div>
<div class="rounded shadow-soft-dark p-3 mb-4">Dark</div>
<div class="rounded shadow-soft-primary p-3 mb-5">Primary Soft</div>
<div class="rounded shadow-xs-primary p-3 mb-5">Primary extra small</div>
<div class="rounded shadow-sm-primary p-3 mb-5">Primary small</div>
<div class="rounded shadow-primary p-3 mb-5">Primary medium</div>
<div class="rounded shadow-lg-primary p-3 mb-5">Primary large</div>
<div class="rounded shadow-xl-primary p-3 mb-5">Primary extra large</div>
Shadow Hover
Two any shadows (size and/or color) can be combined by adding *-hover to the second one!
.transition-[1-5] is used on hover, is the speed in milliseconds (1 = 100, 2 = 200, etc)
.transition-2 .shadow-xs-primary .shadow-lg-primary-hover.transition-2 .shadow-xs .shadow-lg-success-hover.transition-2 .shadow-soft .shadow-lg-hover.transition-2 .shadow-danger .shadow-lg-success-hover.transition-top-hover .shadow .shadow-top-hover.transition-bottom-hover .shadow .shadow-bottom-hover
<div class="rounded transition-2 shadow-xs-primary shadow-lg-primary-hover p-3 mb-5">...</div>
<div class="rounded transition-2 shadow shadow-lg-success-hover p-3 mb-5">...</div>
<div class="rounded transition-2 shadow-soft shadow-lg-hover p-3 mb-5">...</div>
<div class="rounded transition-2 shadow-danger shadow-lg-success-hover p-3 mb-5">...</div>
<div class="rounded transition-top-hover shadow shadow-top-hover p-3 mb-5">...</div>
<div class="rounded transition-bottom-hover shadow shadow-bottom-hover p-3 mb-5">...</div>
Shadow Text
.text-shadow Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
.text-shadow-lg Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
.text-shadow-xl Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
Not shadowed
Lorem ipsum dolor sit amet, consectetur.
Shadowed Title
Lorem ipsum dolor sit amet, consectetur.
<p class="text-shadow"> ... </p>
<p class="text-shadow-lg"> ... </p>
<p class="text-shadow-xl"> ... </p>
<div class="rounded bg-gradient-linear py-6 text-center text-white mb-3">
<h2>Not shadowed</h2>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
<div class="rounded bg-gradient-linear py-6 text-center text-white mb-3">
<h2 class="text-shadow-xl">Shadowed Title</h2>
<p class="text-shadow">Lorem ipsum dolor sit amet, consectetur.</p>
</div>