Shadows
Add or remove box shadows from elements with shadow utilities.
Contents
Examples
While shadows on components are disabled by default in Figuration and can be enabled via $enable-shadows, you can also quickly add or remove a shadow with our box-shadow utility classes. Includes support for .shadow-0 and a few default depths and insets.
.shadow-0 will remove all inset or outset shadows from an element.
No shadow
Shadow depth 1
Shadow depth 2
Shadow depth 3
Shadow depth 4
Shadow depth 5
Shadow inset 1
Shadow inset 2
Shadow inset 3
Shadow inset 4
Shadow inset 5
<div class="shadow-0 radius p-1 mb-2">No shadow</div>
<div class="shadow-d1 radius p-1 mb-2">Shadow depth 1</div>
<div class="shadow-d2 radius p-1 mb-2">Shadow depth 2</div>
<div class="shadow-d3 radius p-1 mb-2">Shadow depth 3</div>
<div class="shadow-d4 radius p-1 mb-2">Shadow depth 4</div>
<div class="shadow-d5 radius p-1 mb-2">Shadow depth 5</div>
<div class="shadow-i1 radius p-1 mb-2">Shadow inset 1</div>
<div class="shadow-i2 radius p-1 mb-2">Shadow inset 2</div>
<div class="shadow-i3 radius p-1 mb-2">Shadow inset 3</div>
<div class="shadow-i4 radius p-1 mb-2">Shadow inset 4</div>
<div class="shadow-i5 radius p-1 mb-2">Shadow inset 5</div>SASS Reference
Variables
The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.
| Name | Type | Default | Description |
|---|---|---|---|
$enable-utility-shadow |
boolean | true |
Enable the generation of the shadow utility classes. |
$shadows |
map |
|
Map of shadow append names and rules to be generated. |
Mixins
No mixins available.