Shadows

Shadow utilities apply a box-shadow at one of two depths, with optional color tints. A separate hover variant lifts an element from the base depth to the deep depth on :hover.

Sizes

Size	Description
none	Removes any shadow
base	Subtle elevation for cards and panels
deep	Pronounced elevation for modals and popovers

Tints

Pattern: .util-shadow-<size> or .util-shadow-<size>--<tint>

• (no suffix) — neutral black shadow, the default
• --red — red-tinted shadow
• --blue — blue-tinted shadow

Examples

Base shadow

Base shadow with .util-shadow-base

<div class="util-background-odyssey util-pad-all-md util-shadow-base">
  Base shadow with
  <code>.util-shadow-base</code>
</div>

<div class="util-shadow-base">Card content</div>

Deep shadow

Deep shadow with .util-shadow-deep

<div class="util-background-odyssey util-pad-all-md util-shadow-deep">
  Deep shadow with
  <code>.util-shadow-deep</code>
</div>

Tinted shadow

Red-tinted shadow with .util-shadow-deep—red

<div class="util-background-odyssey util-pad-all-md util-shadow-deep--red">
  Red-tinted shadow with
  <code>.util-shadow-deep—red</code>
</div>

Hover elevation

.util-shadow-hover (or .util-shadow-hover--<tint>) starts at the base depth and animates to the deep depth with a slight upward lift on hover:

Hover over me — .util-shadow-hover

<div class="util-background-odyssey util-pad-all-md util-shadow-hover">
  Hover over me —
  <code>.util-shadow-hover</code>
</div>

<div class="util-shadow-hover">Hoverable card</div>