Gradient Backgrounds
Build gradients with bg-gradient-to and from/via/to colors.
Syntax
class="bg-gradient-to-r from-cyan-500 to-blue-600"Gradients need a direction plus color stops.
bg-gradient-to-r— direction (r, l, t, b, tr, br...).from-cyan-500— start color.via-sky-400— optional middle color.to-blue-600— end color.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer creates a blue-to-purple hero banner gradient using bg-gradient-to-r from-blue-500 to-purple-600.
- A call-to-action button uses a vertical gradient with bg-gradient-to-b from-indigo-500 to-indigo-700 to add depth.
- A three-stop gradient passes through a mid-color using via-pink-500 to create a sunset effect across a decorative section.
More examples
Two-stop horizontal gradient
bg-gradient-to-r sets the direction; from-blue-500 and to-purple-600 define the start and end colors of the linear gradient.
<div class="bg-gradient-to-r from-blue-500 to-purple-600 text-white p-10 rounded-xl">
<h2 class="text-3xl font-bold">Premium Plan</h2>
<p class="mt-2 text-blue-100">Unlock all features</p>
</div>Three-stop gradient
Adding via-fuchsia-500 inserts a midpoint color, creating a smooth three-color transition across the element's width.
<div class="h-32 bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500 rounded"></div>Gradient text effect
bg-clip-text clips the gradient to the text shape, and text-transparent makes the underlying text color invisible, revealing the gradient fill.
<h1 class="text-5xl font-black bg-gradient-to-r from-cyan-400 to-blue-600
bg-clip-text text-transparent">
Gradient Text
</h1>
Discussion