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="ss-c-shadow--none ss-c-bg--fill_01 ss-c-p--04 ss-c-mb--04">No shadow</div>
        <div class="ss-c-shadow--sm ss-c-bg--fill_01 ss-c-p--04 ss-c-mb--04">Small shadow</div>
        <div class="ss-c-shadow--md ss-c-bg--fill_01 ss-c-p--04 ss-c-mb--04">Medium shadow</div>
        <div class="ss-c-shadow--lg ss-c-bg--fill_01 ss-c-p--04 ss-c-mb--04">Large shadow</div>
        <div class="ss-c-shadow--xl ss-c-bg--fill_01 ss-c-p--04 ss-c-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="ss-c-elevation--01 ss-c-bg--fill_01 ss-c-p--04 ss-c-mb--04">
            Elevation 1 (cards)
        </div>
        <div class="ss-c-elevation--02 ss-c-bg--fill_01 ss-c-p--04 ss-c-mb--04">
            Elevation 2 (raised cards)
        </div>
        <div class="ss-c-elevation--03 ss-c-bg--fill_01 ss-c-p--04 ss-c-mb--04">
            Elevation 3 (drawers)
        </div>
        <div class="ss-c-elevation--04 ss-c-bg--fill_01 ss-c-p--04 ss-c-mb--04">
            Elevation 4 (dialogs)
        </div>
        <div class="ss-c-elevation--05 ss-c-bg--fill_01 ss-c-p--04 ss-c-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="ss-c-shadow--top ss-c-bg--fill_01 ss-c-p--04 ss-c-mb--04">Shadow from top</div>
        <div class="ss-c-shadow--bottom ss-c-bg--fill_01 ss-c-p--04 ss-c-mb--04">
            Shadow from bottom
        </div>
        <div class="ss-c-shadow--left ss-c-bg--fill_01 ss-c-p--04 ss-c-mb--04">
            Shadow from left
        </div>
        <div class="ss-c-shadow--right ss-c-bg--fill_01 ss-c-p--04 ss-c-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="ss-c-shadow--inset ss-c-bg--fill_01 ss-c-p--04 ss-c-mb--04">
            Inset shadow (pressed effect)
        </div>
        <div class="ss-c-shadow--inset-sm ss-c-bg--fill_01 ss-c-p--04 ss-c-mb--04">
            Small inset shadow
        </div>
        <div class="ss-c-shadow--inset-lg ss-c-bg--fill_01 ss-c-p--04 ss-c-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="ss-c-shadow--primary ss-c-bg--fill_01 ss-c-p--04 ss-c-mb--04">
            Primary colored shadow
        </div>
        <div class="ss-c-shadow--success ss-c-bg--fill_01 ss-c-p--04 ss-c-mb--04">
            Success colored shadow
        </div>
        <div class="ss-c-shadow--warning ss-c-bg--fill_01 ss-c-p--04 ss-c-mb--04">
            Warning colored shadow
        </div>
        <div class="ss-c-shadow--danger ss-c-bg--fill_01 ss-c-p--04 ss-c-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="ss-c-text-shadow--sm ss-c-fs--03">Small text shadow</p>
        <p class="ss-c-text-shadow--md ss-c-fs--03">Medium text shadow</p>
        <p class="ss-c-text-shadow--lg ss-c-fs--03">Large text shadow</p>
        <p class="ss-c-text-shadow--glow ss-c-fs--03">Glowing text shadow</p>