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..

Thinking...

Installation

Install the following dependencies:

npm i clsx tailwind-merge

Add utils file

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Add the code to global.css.

@theme {
    --animate-text-gradient: text-gradient 1.3s linear infinite;

    @keyframes text-gradient {
        to {
            background-position: -200% center;
        }
    }
}

Copy and paste the following code into your project.

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

type Props = {
  text: string;
  className?: string;
};

export default function AnimatedGradientText({ text, className }: Props) {
  return (
    <span
      className={cn(
        "inline-flex animate-text-gradient bg-linear-to-r from-[#ACACAC] via-[#363636] to-[#ACACAC] bg-[200%_auto] text-transparent bg-clip-text",
        className,
      )}
    >
      {text}
    </span>
  );
}

API

Prop	Type	Default	Description
text	`string`		The text to be displayed with an animated gradient effect
className	`string`	`undefined`	Optional CSS class for additional styling