Creating Gradient Text Effects in Tailwind CSS

Gradient Text Basics

Gradient text is a popular design trend that adds visual interest to headings and key elements. Tailwind CSS makes it easy with a combination of utility classes.

The Essential Classes

Creating gradient text requires three key classes working together:

• bg-gradient-to-{direction}: Sets the gradient direction
• from-{color} / via-{color} / to-{color}: Define color stops
• bg-clip-text: Clips the background to the text shape
• text-transparent: Makes the text color transparent so gradient shows

Basic Implementation

<h1 class="text-4xl font-bold bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
  Gradient Heading
</h1>

<!-- With three colors -->
<h2 class="text-3xl font-bold bg-gradient-to-r from-green-400 via-blue-500 to-purple-600 bg-clip-text text-transparent">
  Rainbow Effect
</h2>

Gradient Directions

• to-r: Left to right (most common)
• to-l: Right to left
• to-t: Bottom to top
• to-b: Top to bottom
• to-br: Top-left to bottom-right
• to-bl, to-tr, to-tl: Other diagonals

Animated Gradient Text

<style>
  @keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }
</style>

<h1 class="text-4xl font-bold bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 bg-clip-text text-transparent bg-[length:200%_auto] animate-[gradient-shift_3s_ease-in-out_infinite]">
  Animated Gradient
</h1>