Gradient Text

Typography

Text with animated gradient color fill.

Preview

Beautiful Gradient TextCustom Colors

Usage

example.jsx

import { GradientText } from "@/components/ui/gradient-text";

export default function Example() {
  return <GradientText />;
}

Source Code

Copy this file into components/ui/gradient-text.jsx in your project.

gradient-text.jsx

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const GradientText = forwardRef(({ className, from = "#6366f1", via, to = "#ec4899", as: Tag = "span", ...props }, ref) => (
  <Tag ref={ref}
    className={cn("bg-clip-text text-transparent", className)}
    style={{ backgroundImage: `linear-gradient(to right, ${from}${via ? `, ${via}` : ""}, ${to})` }}
    {...props}
  />
));
GradientText.displayName = "GradientText";

export { GradientText };

Quick Install

Make sure you have the cn() utility set up. It requires clsx and tailwind-merge.

npm install clsx tailwind-merge