Animated Gradient Text

Animated gradient text is a UI component designed to be visually striking and engaging. As the user reads the text, the colors smoothly transition, creating a dynamic and captivating effect compared to static text. This type of text is especially effective when used for headings or important highlights, enhancing interaction and adding a modern touch to the user experience. This example was created using Tailwind CSS.

Installation

Add the code to tailwind.config.ts.

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

Copy and paste the following code into your project.

export default function AnimatedGradientText({ text }: { text: string }) {
  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}
    </span>
  );
}

Usage

import AnimatedGradientText from "@/components/ui/animated-gradient-text";

export default function AnimatedGradientTextExamle() {
  return (
    <>
      <AnimatedGradientText text="Animated Gradient Text" />
    </>
  );
}