Backgrounds and Borders
Gradients
Gradients are built from a direction and color stops. Set the direction with bg-gradient-to-{side}, then define colors with from-, via- and to-.
Direction and stops
bg-gradient-to-r points the gradient to the right. from-sky-500 to-indigo-600 sets the start and end colors; via- adds a middle color.
Example
<div class="space-y-3">
<button class="bg-gradient-to-r from-sky-500 to-indigo-600 text-white font-semibold px-5 py-2.5 rounded-lg">Gradient button</button>
<div class="bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-600 text-white p-6 rounded-xl font-bold">Three-stop gradient</div>
</div>💡
Common directions: -r (right), -l (left), -t (top), -b (bottom), -tr, -br and so on. Combine with hover: for animated gradient buttons.