Tailwind CSS Gradient

Gradients add visual depth and polish to your designs without needing images. Tailwind CSS provides a complete set of gradient utilities that let you create linear gradients with multiple color stops — all from your HTML classes.

How to Create Tailwind Gradients

A Tailwind gradient requires three parts:

1. Direction — bg-gradient-to-{direction} sets the gradient direction.
2. Starting color — from-{color} sets where the gradient begins.
3. Ending color — to-{color} sets where the gradient ends.

1<div class="bg-gradient-to-r from-blue-500 to-purple-600 text-white p-6 rounded-lg">
2  Left to right gradient
3</div>

Gradient Directions

Tailwind supports 8 gradient directions:

| Class | Direction | |-------|-----------| | bg-gradient-to-t | Bottom to top | | bg-gradient-to-tr | Bottom-left to top-right | | bg-gradient-to-r | Left to right | | bg-gradient-to-br | Top-left to bottom-right | | bg-gradient-to-b | Top to bottom | | bg-gradient-to-bl | Top-right to bottom-left | | bg-gradient-to-l | Right to left | | bg-gradient-to-tl | Bottom-right to top-left |

1<div class="bg-gradient-to-tr from-cyan-500 to-blue-500 p-4 rounded">
2  Diagonal gradient
3</div>

Three-Color Gradients with Via

Add a middle color stop with via-{color} for richer gradients:

1<div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white p-6 rounded-lg">
2  Three-color gradient
3</div>

Gradient Color Stops with Opacity

You can use colors with opacity modifiers for softer gradients:

1<div class="bg-gradient-to-r from-blue-500/80 to-transparent p-6 rounded-lg">
2  Gradient fading to transparent
3</div>

Popular Gradient Combinations

Here are some commonly used gradient color pairs:

1<!-- Sunset -->
2<div class="bg-gradient-to-r from-orange-500 to-pink-500"></div>
3
4<!-- Ocean -->
5<div class="bg-gradient-to-r from-cyan-500 to-blue-600"></div>
6
7<!-- Forest -->
8<div class="bg-gradient-to-r from-green-400 to-emerald-600"></div>
9
10<!-- Berry -->
11<div class="bg-gradient-to-r from-purple-600 to-pink-500"></div>
12
13<!-- Metal -->
14<div class="bg-gradient-to-b from-gray-200 to-gray-500"></div>

Gradient Buttons

Gradients work great on interactive elements:

1<button class="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-bold py-3 px-6 rounded-lg transition-all duration-200">
2  Gradient Button
3</button>

Responsive Gradients

Change gradient direction or colors at different breakpoints:

1<div class="bg-gradient-to-b md:bg-gradient-to-r from-blue-500 to-purple-600 p-6 rounded-lg">
2  Vertical on mobile, horizontal on desktop
3</div>

✏️ Arbitrary Value Usage

For custom gradient angles or color stops, use arbitrary values:

1<div class="bg-[linear-gradient(135deg,#667eea_0%,#764ba2_100%)]">
2  Custom angle gradient
3</div>