### Box Shadows

Add depth to elements with box shadow utilities.

#### Shadow Sizes

No shadow
Small shadow
Medium shadow
Large shadow
Extra large shadow
HTML

    <div class="shadow--none bg--fill_01 p--04 mb--04">No shadow</div>
            <div class="shadow--sm bg--fill_01 p--04 mb--04">Small shadow</div>
            <div class="shadow--md bg--fill_01 p--04 mb--04">Medium shadow</div>
            <div class="shadow--lg bg--fill_01 p--04 mb--04">Large shadow</div>
            <div class="shadow--xl bg--fill_01 p--04 mb--04">
                Extra large shadow
            </div>

### Elevation Shadows

Material design style elevation levels.

#### Elevation Levels

Elevation 1 (cards)
Elevation 2 (raised cards)
Elevation 3 (drawers)
Elevation 4 (dialogs)
Elevation 5 (modals)
HTML

    <div class="elevation--01 bg--fill_01 p--04 mb--04">
                Elevation 1 (cards)
            </div>
            <div class="elevation--02 bg--fill_01 p--04 mb--04">
                Elevation 2 (raised cards)
            </div>
            <div class="elevation--03 bg--fill_01 p--04 mb--04">
                Elevation 3 (drawers)
            </div>
            <div class="elevation--04 bg--fill_01 p--04 mb--04">
                Elevation 4 (dialogs)
            </div>
            <div class="elevation--05 bg--fill_01 p--04 mb--04">
                Elevation 5 (modals)
            </div>

### Directional Shadows

Shadows that appear to come from a specific direction.

#### Direction Variations

Shadow from top
Shadow from bottom
Shadow from left
Shadow from right
HTML

    <div class="shadow--top bg--fill_01 p--04 mb--04">Shadow from top</div>
            <div class="shadow--bottom bg--fill_01 p--04 mb--04">
                Shadow from bottom
            </div>
            <div class="shadow--left bg--fill_01 p--04 mb--04">
                Shadow from left
            </div>
            <div class="shadow--right bg--fill_01 p--04 mb--04">
                Shadow from right
            </div>

### Inset Shadows

Inner shadows for pressed or inset effects.

#### Inset Variations

Inset shadow (pressed effect)
Small inset shadow
Large inset shadow
HTML

    <div class="shadow--inset bg--fill_01 p--04 mb--04">
                Inset shadow (pressed effect)
            </div>
            <div class="shadow--inset-sm bg--fill_01 p--04 mb--04">
                Small inset shadow
            </div>
            <div class="shadow--inset-lg bg--fill_01 p--04 mb--04">
                Large inset shadow
            </div>

### Colored Shadows

Shadows with semantic or custom colors.

#### Semantic Shadow Colors

Primary colored shadow
Success colored shadow
Warning colored shadow
Danger colored shadow
HTML

    <div class="shadow--primary bg--fill_01 p--04 mb--04">
                Primary colored shadow
            </div>
            <div class="shadow--success bg--fill_01 p--04 mb--04">
                Success colored shadow
            </div>
            <div class="shadow--warning bg--fill_01 p--04 mb--04">
                Warning colored shadow
            </div>
            <div class="shadow--danger bg--fill_01 p--04 mb--04">
                Danger colored shadow
            </div>

### Text Shadows

Shadow effects applied to text.

#### Text Shadow Examples

Small text shadow

Medium text shadow

Large text shadow

Glowing text shadow

HTML

    <p class="text-shadow--sm fs--03">Small text shadow</p>
            <p class="text-shadow--md fs--03">Medium text shadow</p>
            <p class="text-shadow--lg fs--03">Large text shadow</p>
            <p class="text-shadow--glow fs--03">Glowing text shadow</p>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!