Shadows

The UPA shadow system creates depth and visual hierarchy across five elevation levels, from subtle ambient lift to fully floating overlays. Use shadows to elevate interactive elements, separate layers and indicate interactivity.

Shadow Scale

Five elevation levels from subtle to dramatic. Light mode uses soft black shadows. Dark mode combines a faint white ring with a soft white glow.

Small

Inputs and inline elements.

Medium

Cards and dropdowns.

Large

Floating panels and menus.

Extra Large

Modals and dialogs.

2X Large

Full-screen overlays.

Use the smallest shadow that communicates the hierarchy you need. Reserve extra large and 2X large for modals, dialogs and full-screen overlays. Never stack heavy shadows on already heavy borders.

Usage

What each elevation level is for, at a glance.

Name
Small
Description
Inputs, chips, inline actions. The lightest lift off the surface.
Name
Medium
Description
Default cards, dropdowns, tooltips and any hoverable surface.
Name
Large
Description
Floating panels, navigation menus, emphasised feature cards.
Name
Extra Large
Description
Modals, dialogs, popovers and overlays that need clear separation.
Name
2X Large
Description
Top-level overlays, full-screen dialogs, the highest possible surface.

Interactive Example

Shadows communicate interactivity. Elevate on hover to give users a clear affordance.

Card with hover shadow

Hover Me

Shadow steps from small to large on hover to indicate interactivity.

Button with shadow

Primary buttons use shadow-md by default, stepping to shadow-lg on hover.

Always pair a shadow change with a subtle colour or ring change for users who cannot perceive the shadow transition. Shadow alone is not an accessible affordance.

Best Practices

Name
Use shadows consistently
Description
The same elevation level should produce the same shadow everywhere it appears.
Name
Increase on interaction
Description
Step up one level on hover or focus to signal interactivity.
Name
Respect hierarchy
Description
Larger shadows mean higher visual priority. Do not elevate chrome above content.
Name
Avoid heavy borders
Description
Shadows and thick borders compete. Pick one to carry the separation.
Name
Reserve XL and 2XL
Description
Use the top two levels only for modals, dialogs and full-screen overlays.

Code Reference

Light mode uses soft black shadows. Dark mode combines a 1px white ring at 10 percent opacity with a gentle white glow.

<!-- Light and dark pairings -->
<div class="shadow-sm dark:ring-1 dark:ring-white/10 dark:shadow-none">
<div class="shadow-md dark:ring-1 dark:ring-white/10 dark:shadow-[0_4px_6px_-1px_rgb(255_255_255_/_0.05)]">
<div class="shadow-lg dark:ring-1 dark:ring-white/10 dark:shadow-[0_10px_15px_-3px_rgb(255_255_255_/_0.05)]">
<div class="shadow-xl dark:ring-1 dark:ring-white/10 dark:shadow-[0_20px_25px_-5px_rgb(255_255_255_/_0.06)]">
<div class="shadow-2xl dark:ring-1 dark:ring-white/10 dark:shadow-[0_25px_50px_-12px_rgb(255_255_255_/_0.08)]">

CSS custom properties:

:root {
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

.dark {
  --shadow-sm: none;
  --shadow-md: 0 4px 6px -1px rgb(255 255 255 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(255 255 255 / 0.05);
  --shadow-xl: 0 20px 25px -5px rgb(255 255 255 / 0.06);
  --shadow-2xl: 0 25px 50px -12px rgb(255 255 255 / 0.08);

  --ring-sm: 1px solid rgb(255 255 255 / 0.1);
}