Docs
Animated Gradient Text
A component to animate the text using gradient
Loading...
Installation
CLI
pnpm dlx shadcn@latest add https://animata.design/r/text/animated-gradient-text.jsonManual
Add to your CSS
@keyframes bg-position {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@theme {
--animate-bg-position: bg-position 3s infinite alternate;
}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.tsxPaste 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-linear-to-r from-yellow-500 from-30% via-yellow-700 via-50% to-pink-500 to-80% bg-size-[200%_auto] bg-clip-text text-transparent",
className,
)}
>
{children}
</div>
);
}Credits
Built by hari