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.

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

Preview

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 |

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

Preview

Three-Color Gradients with Via

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

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

Preview

Gradient Color Stops with Opacity

You can use colors with opacity modifiers for softer gradients:

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

Popular Gradient Combinations

Here are some commonly used gradient color pairs:

<!-- Sunset -->
<div class="bg-gradient-to-r from-orange-500 to-pink-500"></div>

<!-- Ocean -->
<div class="bg-gradient-to-r from-cyan-500 to-blue-600"></div>

<!-- Forest -->
<div class="bg-gradient-to-r from-green-400 to-emerald-600"></div>

<!-- Berry -->
<div class="bg-gradient-to-r from-purple-600 to-pink-500"></div>

<!-- Metal -->
<div class="bg-gradient-to-b from-gray-200 to-gray-500"></div>

Preview

Gradient Buttons

Gradients work great on interactive elements:

<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">
  Gradient Button
</button>

Preview

Responsive Gradients

Change gradient direction or colors at different breakpoints:

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

✏️ Arbitrary Value Usage

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

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