DocsComponentsBlog
Star us
Docs

Animated Gradient Text

A component to animate the text using gradient

Installation

Update tailwind.config.js

theme: {
    extend: {
       keyframes: {
         "bg-position": {
         "0%": { backgroundPosition: "0% 50%" },
          "100%": { backgroundPosition: "100% 50%" },
         }
     }
    },
  },

Run the following command

It will create a new file called animated-gradient-text.tsx inside the components/animata/text directory.

mkdir -p components/animata/text && touch components/animata/text/animated-gradient-text.tsx

Paste the code

Open the newly created file and paste the following code:

import { cn } from "@/lib/utils";
 
export default function AnimatedGradientText({
  className,
  children,
}: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn(
        "bg-size animate-bg-position bg-gradient-to-r from-yellow-500 from-30% via-yellow-700 via-50% to-pink-500 to-80% bg-[length:200%_auto] bg-clip-text text-transparent",
        className,
      )}
    >
      {children}
    </div>
  );
}

Credits

Built by hari

Edit this page on GitHub
Skeleton overviewBold Copy