Animated Gradient Text

An animated gradient text component that can be used to display numbers or text.

Example

Who doesn't love a good gradient?

Installation

Update tailwind.config.js

Add the following animations to your tailwind.config.js file:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      keyframes: {
        "gradient-text": {
          "0%": { backgroundPosition: "0% 50%" },
          "100%": { backgroundPosition: "100% 50%" },
        },
      },
      animation: {
        "gradient-text": "gradient-text 6s linear infinite",
      },
    },
  },
};

    Copy and paste the source code into your project.

    import React from "react";
import { cn } from "@/lib/utils";
 
type Props = {
  children: React.ReactNode;
  className?: string;
};
 
/**
 * AnimatedGradientText component.
 *
 * A component that displays text with an animated gradient effect.
 *
 * @param {React.ReactNode} props.children - The content to be displayed within the component.
 * @param {string} [props.className] - The additional CSS class name(s) to be applied to the component.
 */
export function AnimatedGradientText({
  children,
  className,
}: Props): JSX.Element {
  const gradientStyle: React.CSSProperties = {
    background:
      "linear-gradient(to right, #a855f7, #ec4899, #eab308, #ec4899, #a855f7, #ec4899, #eab308)",
    backgroundSize: "300% 300%",
    backgroundClip: "text",
    WebkitBackgroundClip: "text",
    color: "transparent",
    animation: "gradient-text 8s ease infinite",
  };
 
  return (
    <div
      style={gradientStyle}
      className={cn(className, "animate-gradient-text")}
    >
      {children}
    </div>
  );
}

      Update the import paths to match your project setup.

      Props

      PropTypeDefaultDescription
      childrenReact.ReactNode-The content to be displayed within the component.
      classNamestring-The additional CSS class name(s) to be applied to the component.

      Credits

      Credit to Built With Code for the original tutorial.

      Animated NumberEncryption Text