Shadows
Add or remove shadows to elements with box-shadow utilities.
Shadow
You can also quickly add or remove a shadow with our box-shadow utility classes. Includes support for .shadow-none and three default sizes.
<div class="w-75p h-75p bg-grey-light-4 shadow-none"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow-sm"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow-lg"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow-xl"></div>
| Class | Values |
|---|---|
class="shadow-[Value]" |
none / sm / lg / xl |
Shadow Direction
Change the directions of shadow on the go.
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-top"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-bottom"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-start"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow shadow-end"></div>
| Class | Values |
|---|---|
class="shadow shadow-[value]" |
top / bottom / start / end |
Shadow Hover
Add hover effect by adding .shadow-hover class. For additional sizes add .shadow-hover-*modifier classes.
<div class="w-75p h-75p bg-grey-light-4 shadow-none shadow-hover-sm"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow-sm shadow-hover"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow-lg shadow-hover-xl"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow-xl shadow-hover-sm"></div>
| Class | Values |
|---|---|
class="border" |
Default value is set to 1 |
class="shadow-hover-[value]" |
none / sm / lg / xl |
Shadow Colors Option
Add hover effect by adding .shadow-hover class. For additional sizes add .shadow-hover-*modifier classes.
<div class="w-75p h-75p bg-grey-light-4 shadow-primary"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow-red"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow-blue"></div>
<div class="w-75p h-75p bg-grey-light-4 shadow-danger"></div>
| Class | Values |
|---|---|
class="shadow-[value]" |
primary / success / warning / danger / info / light / dark / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke |