from-/via-/to- stops for gradients in any palette.

Syntax#

html
<div class="bg-gradient-to-r from-cyan-400 to-blue-600 h-16"></div>

All palettes apply#

Every palette in the colors/index|color system generates a from-* class: from-slate-500, from-gray-500, from-zinc-500, from-neutral-500, from-stone-500, from-red-500, from-orange-500, from-amber-500…

Patterns#

  • Buttons: from-blue-500 to-indigo-600
  • Text: bg-clip-text + transparent
  • Keep gradients ≤3 stops

colors/index|Color hub · concepts/dark-mode-strategies|Dark mode · accessibility/color-contrast|Contrast