~/css/tailwind-text-gradients
Six ways to put gradients on text with Tailwind: a gradient headline, one gradient word in a white heading, an animated shine, a conic colour wheel, a gradient underline under a phrase and dashboard numbers with a metallic fade.
Gradient text in four utilities: bg-gradient-to-r with from- and to- colours, bg-clip-text and text-transparent. Both stops are dark enough to keep the heading above 4.5:1 contrast on white.
<h3 class="bg-gradient-to-r from-indigo-700 to-pink-700 bg-clip-text text-center text-4xl font-black text-transparent">Design without limits</h3>Only one word in a white headline gets the gradient, by wrapping it in a span with the clip utilities. A via- stop adds a third colour, and the light pastel stops stay readable on a dark background.
<h3 class="text-3xl font-black text-white">Build sites that <span class="bg-gradient-to-r from-cyan-300 via-violet-300 to-pink-300 bg-clip-text text-transparent">convert</span>.</h3>A gradient three times wider than the word slides through the letters. bg-[length:300%_100%] sizes the background, one keyframe moves its position, and motion-reduce:animate-none keeps it still for anyone who asks.
<p class="animate-[twtx-shine_6s_linear_infinite] bg-[linear-gradient(90deg,#fde68a,#f9a8d4,#a5f3fc,#fde68a)] bg-[length:300%_100%] bg-clip-text text-6xl font-black text-transparent motion-reduce:animate-none">Aurora</p>@keyframes twtx-shine { to { background-position: 300% 0; } }A colour wheel clipped to the letters with an arbitrary conic-gradient background. Moving the centre with at 50% 60% changes which hue lands on which letter.
<p class="bg-[conic-gradient(at_50%_60%,#fca5a5,#fde68a,#86efac,#93c5fd,#c4b5fd,#f9a8d4,#fca5a5)] bg-clip-text text-7xl font-black text-transparent">Prism</p>Instead of colouring the letters, a thick gradient bar sits under the key phrase, drawn as a background sized to 100% by 8px at the bottom. The text keeps its normal colour, so contrast is never in question.
<h3 class="max-w-xs text-3xl font-black leading-tight text-slate-900">Grow with <span class="bg-gradient-to-r from-amber-400 to-rose-500 bg-[length:100%_8px] bg-bottom bg-no-repeat pb-0.5">honest data</span>.</h3>Big dashboard numbers that fade from white to slate from top to bottom, giving them a metallic finish. Each figure is a description list value paired with its label, which flex-col-reverse shows underneath.
<dl class="grid w-full max-w-xs grid-cols-3 gap-3 text-center">
<div class="flex flex-col-reverse"><dt class="text-xs font-medium text-slate-400">Orders</dt><dd class="bg-gradient-to-b from-white to-slate-400 bg-clip-text text-3xl font-black text-transparent">1.2k</dd></div>
<div class="flex flex-col-reverse"><dt class="text-xs font-medium text-slate-400">Visitors</dt><dd class="bg-gradient-to-b from-white to-slate-400 bg-clip-text text-3xl font-black text-transparent">48k</dd></div>
<div class="flex flex-col-reverse"><dt class="text-xs font-medium text-slate-400">Conversion</dt><dd class="bg-gradient-to-b from-white to-slate-400 bg-clip-text text-3xl font-black text-transparent">2.6%</dd></div>
</dl>bg-gradient-to-r from-… to-… bg-clip-text text-transparent is the whole recipe. Add via- for a third colour.
For conic or multi-stop gradients, write the background yourself: bg-[conic-gradient(…)] or bg-[linear-gradient(…)].
Make the background wider with bg-[length:300%_100%] and animate background-position; stop it with motion-reduce:animate-none.
Each colour in the gradient must contrast with the background: darker stops on light pages, pastel stops on dark ones.
Yes, it is still normal text.
bg-clip-text needs a background on the same element; a gradient set on a parent will not show.
Yes, see the CSS gradient text collection.