Skip to content
STYLESCAPE

Shadow Utilities

Box, elevation, directional, inset, coloured and text shadow utilities.

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