Gradients

Gradient utilities built on design tokens (works in light/dark themes).

Quick reference

Class	Styles
af-gradient-accent	background-image: linear-gradient(135deg, primary → info)
af-gradient-subtle	background-image: linear-gradient(180deg, surface → surface-secondary)
af-gradient-border	background-image: linear-gradient(135deg, border → border-strong)

Examples

Accent gradient

<div class="af-gradient-accent af-radius-md" style="height: 4rem;">
</div>

Subtle gradient

<div class="af-gradient-subtle af-radius-md af-border" style="height: 4rem;">
</div>

Border gradient

<div class="af-gradient-border af-radius-md" style="padding: 1px;">
  <div class="af-bg-surface af-radius-md" style="height: 4rem;">
  </div>
</div>

Available classes

• af-gradient-accent
• af-gradient-subtle
• af-gradient-border

Responsive variants

All gradient utilities support responsive variants using the @{bp} suffix. See Responsive Suffix for syntax and breakpoints.

Related

• Background color