Text Animated Gradient

TextAnimatedGradient.tsx

export function TextAnimatedGradient() {
  return (
    <span className="inline-flex animate-text-gradient bg-gradient-to-r from-[#ACACAC] via-[#363636] to-[#ACACAC] bg-[200%_auto] text-3xl text-center text-transparent font-medium bg-clip-text">
      Text Animated Gradient
    </span>
  );
}

tailwind.config.ts

{
  "animation": {
    "text-gradient": "text-gradient 1.5s linear infinite"
  },
  "keyframes": {
    "text-gradient": {
      "to": {
        "backgroundPosition": "200% center"
      }
    }
  }
}