——Text · Free
Gradient Text
An animated multi-color gradient that flows through your headline. One element.
Gradient
import { motion } from "framer-motion";
export function GradientText({ text = "Gradient" }) {
return (
<motion.span
className="bg-clip-text text-3xl font-bold text-transparent"
style={{ backgroundImage: "linear-gradient(90deg,#4fa0ff,#9f7bff,#38e8b0,#4fa0ff)", backgroundSize: "300% 100%" }}
animate={{ backgroundPositionX: ["0%", "300%"] }}
transition={{ duration: 6, repeat: Infinity, ease: "linear" }}
>{text}</motion.span>
);
}How it works
Gradient Text is a hand-built text component for React, styled with Tailwind and animated with Framer Motion — no heavy dependency tree, no 60-package install. Drop it in, keep your bundle lean, and it stays performant on real devices. It's free — copy the code above and ship it.
← Browse all components