Gradient

vel-src: gradients.css

Utilities for applying gradient backgrounds and text gradients to elements.

Class	Properties
vel-bg-gradient-primary	background: linear-gradient(135deg, var(--vel-primary-600), var(--vel-primary-400))
vel-bg-gradient-secondary	background: linear-gradient(135deg, var(--vel-secondary-600), var(--vel-secondary-400))
vel-bg-gradient-success	background: linear-gradient(135deg, var(--vel-success-600), var(--vel-success-400))
vel-bg-gradient-danger	background: linear-gradient(135deg, var(--vel-danger-600), var(--vel-danger-400))
vel-bg-gradient-warning	background: linear-gradient(135deg, var(--vel-warning-600), var(--vel-warning-400))
vel-bg-gradient-info	background: linear-gradient(135deg, var(--vel-info-600), var(--vel-info-400))
vel-bg-gradient-aurora	background: linear-gradient(135deg, #7c5cfc, #38bdf8, #34d399)
vel-bg-gradient-ocean	background: linear-gradient(135deg, #0ea5e9, #6366f1)
vel-bg-gradient-sunset	background: linear-gradient(135deg, #f97316, #ec4899)
vel-bg-gradient-cosmic	background: linear-gradient(135deg, #7c5cfc, #ec4899)
vel-bg-gradient-forest	background: linear-gradient(135deg, #16a34a, #0ea5e9)
vel-bg-gradient-candy	background: linear-gradient(135deg, #f472b6, #a78bfa)
vel-bg-gradient-to-t	background-image: linear-gradient(to top, ...)
vel-bg-gradient-to-tr	background-image: linear-gradient(to top right, ...)
vel-bg-gradient-to-r	background-image: linear-gradient(to right, ...)
vel-bg-gradient-to-br	background-image: linear-gradient(to bottom right, ...)
vel-bg-gradient-to-b	background-image: linear-gradient(to bottom, ...)
vel-bg-gradient-to-bl	background-image: linear-gradient(to bottom left, ...)
vel-bg-gradient-to-l	background-image: linear-gradient(to left, ...)
vel-bg-gradient-to-tl	background-image: linear-gradient(to top left, ...)
vel-text-gradient-primary	background: linear-gradient(...); -webkit-background-clip: text; color: transparent
vel-text-gradient-aurora	background: linear-gradient(135deg, #7c5cfc, #38bdf8, #34d399); -webkit-background-clip: text; color: transparent

Examples

Named gradient backgrounds

example.html

<div style="display:flex;gap:8px;padding:1rem;background:#060b17;flex-wrap:wrap;">
  <div class="vel-bg-gradient-primary" style="width:80px;height:60px;border-radius:8px;"></div>
  <div class="vel-bg-gradient-aurora" style="width:80px;height:60px;border-radius:8px;"></div>
  <div class="vel-bg-gradient-ocean" style="width:80px;height:60px;border-radius:8px;"></div>
  <div class="vel-bg-gradient-sunset" style="width:80px;height:60px;border-radius:8px;"></div>
  <div class="vel-bg-gradient-cosmic" style="width:80px;height:60px;border-radius:8px;"></div>
  <div class="vel-bg-gradient-forest" style="width:80px;height:60px;border-radius:8px;"></div>
  <div class="vel-bg-gradient-candy" style="width:80px;height:60px;border-radius:8px;"></div>
</div>

Text gradient

Aurora Text Gradient

Primary Text Gradient

example.html

<div style="padding:1.5rem;background:#060b17;">
  <h2 class="vel-text-gradient-aurora" style="font-size:2rem;font-weight:700;margin:0;">Aurora Text Gradient</h2>
  <h2 class="vel-text-gradient-primary" style="font-size:2rem;font-weight:700;margin:0.5rem 0 0;">Primary Text Gradient</h2>
</div>