🌈

Gradient Tokens

DTCG Type: gradient

Gradient tokens define linear, radial, and conic gradient values. They add depth, vibrancy, and visual interest to backgrounds, buttons, and decorative elements.

Token Examples

Token Name	Value
`gradient.primary`	`linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%)`
`gradient.sunset`	`linear-gradient(135deg, #F97316 0%, #EC4899 100%)`
`gradient.ocean`	`linear-gradient(135deg, #06B6D4 0%, #3B82F6 100%)`

CSS Properties

These CSS properties typically consume gradient tokens:

backgroundbackground-imageborder-image

Use Cases

✓

Hero section backgrounds

✓

Button gradient fills

✓

Card decorative borders

✓

Brand accent overlays

✓

Progress bar fills

✓

Text gradient effects

Usage Example

:root {
  --gradient-primary: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  --gradient-sunset: linear-gradient(135deg, #F97316 0%, #EC4899 100%);
}

.hero { background: var(--gradient-primary); }
.cta-btn { background: var(--gradient-sunset); }
.text-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Available in Presets

Full Brand System

Complete 3-tier system with light/dark modes

Landing Page

Bold marketing with gradients and drama

Naming Convention

// Token name format: {category}.{group}.{variant}
// Examples:
// gradient.primary → linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%)
// gradient.sunset → linear-gradient(135deg, #F97316 0%, #EC4899 100%)
// gradient.ocean → linear-gradient(135deg, #06B6D4 0%, #3B82F6 100%)

// CSS custom property:
// --gradient-primary: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
// --gradient-sunset: linear-gradient(135deg, #F97316 0%, #EC4899 100%);

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