Back

Gradient Text

Good for thinking animations.

Gradient Text

gradient-text.tsx
"use client";

export default function GradientText() {
  return (
    <div className="flex items-center justify-center min-h-[120px]">
      <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 bg-clip-text text-transparent animate-[gradient_3s_ease_infinite] bg-[length:200%_auto]">
        Gradient Text
      </h1>
    </div>
  );
}