Gradient Text with Tailwind CSS

Create eye-catching gradient text using Tailwind’s utility classes.

Basic Gradient Text

<h1 class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 
           bg-clip-text text-transparent text-5xl font-bold">
  Gradient Text
</h1>

Animated Gradient

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

<style>
@keyframes gradient {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}
.animate-gradient {
  animation: gradient 3s ease infinite;
}
</style>

Common Gradient Combinations

<!-- Ocean -->
<span class="bg-gradient-to-r from-cyan-400 to-blue-500 
             bg-clip-text text-transparent">
  Ocean
</span>

<!-- Sunset -->
<span class="bg-gradient-to-r from-orange-400 via-pink-500 to-purple-500 
             bg-clip-text text-transparent">
  Sunset
</span>

<!-- Nature -->
<span class="bg-gradient-to-r from-green-400 to-emerald-500 
             bg-clip-text text-transparent">
  Nature
</span>

<!-- Gold -->
<span class="bg-gradient-to-r from-amber-200 via-yellow-400 to-amber-500 
             bg-clip-text text-transparent">
  Gold
</span>

Reusable Component (React)

interface GradientTextProps {
  children: React.ReactNode;
  from?: string;
  via?: string;
  to?: string;
  className?: string;
}

function GradientText({ 
  children, 
  from = 'purple-500', 
  via, 
  to = 'pink-500',
  className = ''
}: GradientTextProps) {
  const gradient = via 
    ? `from-${from} via-${via} to-${to}` 
    : `from-${from} to-${to}`;
  
  return (
    <span className={`bg-gradient-to-r ${gradient} bg-clip-text text-transparent ${className}`}>
      {children}
    </span>
  );
}

Note: bg-clip-text and text-transparent work together to make the background gradient show through the text.