bg-gradient-to-r/b/t/l/tr…, from-*, via-*, to-* — directional gradients from any palette. This family contains 812 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
bg-gradient-to-t | background-image: linear-gradient(to top, var(--tw-gradient-stops)); |
bg-gradient-to-tr | background-image: linear-gradient(to top right, var(--tw-gradient-stops)); |
bg-gradient-to-r | background-image: linear-gradient(to right, var(--tw-gradient-stops)); |
bg-gradient-to-br | background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); |
bg-gradient-to-b | background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); |
bg-gradient-to-bl | background-image: linear-gradient(to bottom left, var(--tw-gradient-stops)); |
bg-gradient-to-l | background-image: linear-gradient(to left, var(--tw-gradient-stops)); |
bg-gradient-to-tl | background-image: linear-gradient(to top left, var(--tw-gradient-stops)); |
from-inherit | --tw-gradient-from: inherit var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-current | --tw-gradient-from: currentColor var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-transparent | --tw-gradient-from: transparent var(--tw-gradient-from-position); --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-black | --tw-gradient-from: #000 var(--tw-gradient-from-position); --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-white | --tw-gradient-from: #fff var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-slate-50 | --tw-gradient-from: #f8fafc var(--tw-gradient-from-position); --tw-gradient-to: rgb(248 250 252 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-slate-100 | --tw-gradient-from: #f1f5f9 var(--tw-gradient-from-position); --tw-gradient-to: rgb(241 245 249 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-slate-200 | --tw-gradient-from: #e2e8f0 var(--tw-gradient-from-position); --tw-gradient-to: rgb(226 232 240 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-slate-300 | --tw-gradient-from: #cbd5e1 var(--tw-gradient-from-position); --tw-gradient-to: rgb(203 213 225 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-slate-400 | --tw-gradient-from: #94a3b8 var(--tw-gradient-from-position); --tw-gradient-to: rgb(148 163 184 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-slate-500 | --tw-gradient-from: #64748b var(--tw-gradient-from-position); --tw-gradient-to: rgb(100 116 139 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-slate-600 | --tw-gradient-from: #475569 var(--tw-gradient-from-position); --tw-gradient-to: rgb(71 85 105 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-slate-700 | --tw-gradient-from: #334155 var(--tw-gradient-from-position); --tw-gradient-to: rgb(51 65 85 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-slate-800 | --tw-gradient-from: #1e293b var(--tw-gradient-from-position); --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-slate-900 | --tw-gradient-from: #0f172a var(--tw-gradient-from-position); --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-slate-950 | --tw-gradient-from: #020617 var(--tw-gradient-from-position); --tw-gradient-to: rgb(2 6 23 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-gray-50 | --tw-gradient-from: #f9fafb var(--tw-gradient-from-position); --tw-gradient-to: rgb(249 250 251 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-gray-100 | --tw-gradient-from: #f3f4f6 var(--tw-gradient-from-position); --tw-gradient-to: rgb(243 244 246 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-gray-200 | --tw-gradient-from: #e5e7eb var(--tw-gradient-from-position); --tw-gradient-to: rgb(229 231 235 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-gray-300 | --tw-gradient-from: #d1d5db var(--tw-gradient-from-position); --tw-gradient-to: rgb(209 213 219 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-gray-400 | --tw-gradient-from: #9ca3af var(--tw-gradient-from-position); --tw-gradient-to: rgb(156 163 175 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-gray-500 | --tw-gradient-from: #6b7280 var(--tw-gradient-from-position); --tw-gradient-to: rgb(107 114 128 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-gray-600 | --tw-gradient-from: #4b5563 var(--tw-gradient-from-position); --tw-gradient-to: rgb(75 85 99 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-gray-700 | --tw-gradient-from: #374151 var(--tw-gradient-from-position); --tw-gradient-to: rgb(55 65 81 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-gray-800 | --tw-gradient-from: #1f2937 var(--tw-gradient-from-position); --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-gray-900 | --tw-gradient-from: #111827 var(--tw-gradient-from-position); --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-gray-950 | --tw-gradient-from: #030712 var(--tw-gradient-from-position); --tw-gradient-to: rgb(3 7 18 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-zinc-50 | --tw-gradient-from: #fafafa var(--tw-gradient-from-position); --tw-gradient-to: rgb(250 250 250 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-zinc-100 | --tw-gradient-from: #f4f4f5 var(--tw-gradient-from-position); --tw-gradient-to: rgb(244 244 245 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-zinc-200 | --tw-gradient-from: #e4e4e7 var(--tw-gradient-from-position); --tw-gradient-to: rgb(228 228 231 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-zinc-300 | --tw-gradient-from: #d4d4d8 var(--tw-gradient-from-position); --tw-gradient-to: rgb(212 212 216 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-zinc-400 | --tw-gradient-from: #a1a1aa var(--tw-gradient-from-position); --tw-gradient-to: rgb(161 161 170 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-zinc-500 | --tw-gradient-from: #71717a var(--tw-gradient-from-position); --tw-gradient-to: rgb(113 113 122 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-zinc-600 | --tw-gradient-from: #52525b var(--tw-gradient-from-position); --tw-gradient-to: rgb(82 82 91 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-zinc-700 | --tw-gradient-from: #3f3f46 var(--tw-gradient-from-position); --tw-gradient-to: rgb(63 63 70 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-zinc-800 | --tw-gradient-from: #27272a var(--tw-gradient-from-position); --tw-gradient-to: rgb(39 39 42 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-zinc-900 | --tw-gradient-from: #18181b var(--tw-gradient-from-position); --tw-gradient-to: rgb(24 24 27 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-zinc-950 | --tw-gradient-from: #09090b var(--tw-gradient-from-position); --tw-gradient-to: rgb(9 9 11 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-neutral-50 | --tw-gradient-from: #fafafa var(--tw-gradient-from-position); --tw-gradient-to: rgb(250 250 250 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-neutral-100 | --tw-gradient-from: #f5f5f5 var(--tw-gradient-from-position); --tw-gradient-to: rgb(245 245 245 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-neutral-200 | --tw-gradient-from: #e5e5e5 var(--tw-gradient-from-position); --tw-gradient-to: rgb(229 229 229 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-neutral-300 | --tw-gradient-from: #d4d4d4 var(--tw-gradient-from-position); --tw-gradient-to: rgb(212 212 212 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-neutral-400 | --tw-gradient-from: #a3a3a3 var(--tw-gradient-from-position); --tw-gradient-to: rgb(163 163 163 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-neutral-500 | --tw-gradient-from: #737373 var(--tw-gradient-from-position); --tw-gradient-to: rgb(115 115 115 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-neutral-600 | --tw-gradient-from: #525252 var(--tw-gradient-from-position); --tw-gradient-to: rgb(82 82 82 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-neutral-700 | --tw-gradient-from: #404040 var(--tw-gradient-from-position); --tw-gradient-to: rgb(64 64 64 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-neutral-800 | --tw-gradient-from: #262626 var(--tw-gradient-from-position); --tw-gradient-to: rgb(38 38 38 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-neutral-900 | --tw-gradient-from: #171717 var(--tw-gradient-from-position); --tw-gradient-to: rgb(23 23 23 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-neutral-950 | --tw-gradient-from: #0a0a0a var(--tw-gradient-from-position); --tw-gradient-to: rgb(10 10 10 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-stone-50 | --tw-gradient-from: #fafaf9 var(--tw-gradient-from-position); --tw-gradient-to: rgb(250 250 249 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-stone-100 | --tw-gradient-from: #f5f5f4 var(--tw-gradient-from-position); --tw-gradient-to: rgb(245 245 244 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
from-stone-200 | --tw-gradient-from: #e7e5e4 var(--tw-gradient-from-position); --tw-gradient-to: rgb(231 229 228 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); |
…and 752 more in this family — search by class name to find the exact one.
Example#
example
<div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 h-24 rounded-xl"></div>Responsive & variants#
Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.
Best practices#
- Two stops minimum (from + to); via adds the midpoint
- Gradient text: bg-clip-text + text-transparent (utilities/typography/gradient-text|guide)
Common mistakes#
- Setting bg-gradient-to-r without from/to stops — nothing visible
Related#
utilities/backgrounds/gradients|Gradients · colors/index|Colors