Tailwind CSS Gradient Guide

Basic gradient syntax

Tailwind v3+ uses three utility classes to define a gradient direction, start color, and end color:

<!-- Blue to purple, top-left to bottom-right -->
<div class="bg-gradient-to-br from-blue-500 to-purple-600" />

<!-- With a midpoint color -->
<div class="bg-gradient-to-r from-cyan-400 via-blue-500 to-indigo-600" />

Gradient direction classes

Arbitrary color values

Use bracket notation for hex colors or CSS variables that aren't in your Tailwind palette:

<div class="bg-gradient-to-r from-[#3b82f6] to-[#8b5cf6]" />
<div class="bg-gradient-to-br from-[var(--brand-start)] to-[var(--brand-end)]" />

Opacity on gradient stops

Tailwind v3.1+ supports opacity modifiers on gradient colors:

<!-- Fade to transparent -->
<div class="bg-gradient-to-b from-blue-500 to-blue-500/0" />

<!-- Semi-transparent start -->
<div class="bg-gradient-to-r from-purple-600/50 to-pink-500" />

Animated gradients in Tailwind

Tailwind doesn't animate gradients natively, but you can combine custom CSS with Tailwind classes. The most performant approach uses background-position animation on an oversized gradient:

/* globals.css */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animated-gradient {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient-shift 8s ease infinite;
}

Then apply className="animated-gradient" alongside your Tailwind classes.

Generate Tailwind gradient code

Gradient Studio exports Tailwind class strings directly — pick your colors, adjust the gradient, and copy the generated Tailwind code including arbitrary color values.