Shadows & Elevation

Elevation scale (shadow-1 – shadow-6)

shadow-1

shadow-2

shadow-3

shadow-4

shadow-5

shadow-6

shadow-1 is a subtle inset rim; 2→6 climb from a resting card to a max-elevation dialog. Themed per appearance (deeper on dark).

Shadow Scale

shadow-card

Resting surfaces that sit on the page — cards, stat tiles, list rows. The lowest of the three semantic roles (elevation-2).

CardStatCardCardListList rows

shadow-panel

Small floating surfaces that appear near their trigger — menus, popovers, dropdowns, tooltips. Subtle enough to read in daylight.

PopoverMenuSelectTooltipHoverCardContextMenuDatePicker

shadow-modal

Heavy lift for blocking overlay content — dialogs and alert confirmations. The deeper spread signals that this surface demands attention.

DialogAlertDialog

Token Reference

Token	CSS Variable	Light	Dark
`shadow-card`	`--shadow-card`	`var(--shadow-2) · 0 1px 2px rgb(0 0 0 / 0.08)`	`var(--shadow-2) · deepened for dark canvas`
`shadow-panel`	`--shadow-panel`	`0 16px 48px -12px rgb(0 0 0 / 0.35)`	`0 16px 48px -12px rgb(0 0 0 / 0.6)`
`shadow-modal`	`--shadow-modal`	`0 20px 60px -15px rgb(0 0 0 / 0.35)`	`0 20px 60px -15px rgb(0 0 0 / 0.6)`

Usage

When to use shadow-panel

Apply to any floating surface that appears near its trigger and can be dismissed by clicking outside. The shadow is intentionally restrained so it reads correctly in daylight and at small sizes.

// Popover, Menu, Select.Content, Tooltip, HoverCard.Content
<div data-panel className="shadow-panel rounded-[var(--radius-panel)] ...">
  {children}
</div>

When to use shadow-modal

Apply to blocking overlay content that prevents interaction with the rest of the page. The deeper spread and offset signal that this surface is above everything else and demands resolution.

// Dialog.Content, AlertDialog.Content
<div data-panel className="shadow-modal rounded-[var(--radius-panel)] ...">
  {children}
</div>

Customizing values

Both tokens are CSS custom properties themed per appearance in global.css. Dark mode automatically increases the alpha to compensate for the near-black canvas. Override them per-app without touching the component library:

:root {
// ds-lint-disable-next-line no-rgb — documentation code example
  --shadow-panel: 0 4px 16px -4px rgb(0 0 0 / 0.18);
// ds-lint-disable-next-line no-rgb — documentation code example
  --shadow-modal: 0 8px 32px -8px rgb(0 0 0 / 0.24);
}
.dark {
// ds-lint-disable-next-line no-rgb — documentation code example
  --shadow-panel: 0 16px 48px -12px rgb(0 0 0 / 0.65);
// ds-lint-disable-next-line no-rgb — documentation code example
  --shadow-modal: 0 20px 60px -15px rgb(0 0 0 / 0.75);
}