🌗

Shadow Tokens

DTCG Type: shadow

Shadow tokens define box-shadow and drop-shadow values for creating depth and elevation in your UI. A well-designed shadow scale creates a clear visual hierarchy between surface layers.

Token Examples

Token Name	Value
`shadow.xs`	`0 1px 2px rgba(0,0,0,0.05)`
`shadow.sm`	`0 1px 3px rgba(0,0,0,0.1)`
`shadow.md`	`0 4px 6px -1px rgba(0,0,0,0.1)`
`shadow.lg`	`0 10px 15px -3px rgba(0,0,0,0.1)`
`shadow.xl`	`0 20px 25px -5px rgba(0,0,0,0.1)`

CSS Properties

These CSS properties typically consume shadow tokens:

box-shadowfilter: drop-shadow()

Use Cases

✓

Card and container elevation

✓

Modal and dialog overlays

✓

Dropdown and popover floating

✓

Button press/raised states

✓

Navigation bar depth

✓

Focus ring shadows

Usage Example

:root {
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1);
}

.card { box-shadow: var(--shadow-sm); }
.card:hover { box-shadow: var(--shadow-md); }
.modal { box-shadow: var(--shadow-xl); }

Available in Presets

Full Brand System

Complete 3-tier system with light/dark modes

Product / SaaS

Interactive product UI with semantic modes

Landing Page

Bold marketing with gradients and drama

Dashboard / Admin

Data-dense panels with chart colors

Mobile App

Touch-friendly native-feeling values

Naming Convention

// Token name format: {category}.{group}.{variant}
// Examples:
// shadow.xs → 0 1px 2px rgba(0,0,0,0.05)
// shadow.sm → 0 1px 3px rgba(0,0,0,0.1)
// shadow.md → 0 4px 6px -1px rgba(0,0,0,0.1)
// shadow.lg → 0 10px 15px -3px rgba(0,0,0,0.1)
// shadow.xl → 0 20px 25px -5px rgba(0,0,0,0.1)

// CSS custom property:
// --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
// --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);

// Token set hierarchy:
// global/         → Raw primitive values
// semantic/light/ → Light mode semantic mapping
// semantic/dark/  → Dark mode semantic mapping
// component/      → Component-specific overrides