Gradient Text

Animated gradient that flows across text. Loops continuously. Works with any font size.

Use and inspectUse this when the motion supports the surrounding content. Connect callbacks and state to your app, keep the reset preview as a local demonstration, and add a reduced-motion fallback for movement or looping. The preview is synthetic; it does not call a backend.Next: inspect the source below and replace the demo inputs with your own data.

Gradient TextAnimated gradient that flows across text. Loops continuously. Works with any font size.

"use client";

type GradientTextProps = {
  children: React.ReactNode;
  from?: string;
  via?: string;
  to?: string;
  duration?: number;
};

export function GradientText({
  children,
  from = "#667eea",
  via = "#764ba2",
  to = "#f093fb",
  duration = 3,
}: GradientTextProps) {
  const gradient = `linear-gradient(90deg, ${from}, ${via}, ${to}, ${from})`;
  return (
    <>
      <style>{`@keyframes gradient-slide { 0% { background-position: 0% 50% } 100% { background-position: 200% 50% } }`}</style>
      <span
        style={{
          background: gradient,
          backgroundSize: "200% 100%",
          WebkitBackgroundClip: "text",
          WebkitTextFillColor: "transparent",
          backgroundClip: "text",
          animation: `gradient-slide ${duration}s linear infinite`,
          display: "inline",
        }}
      >
        {children}
      </span>
    </>
  );
}

Props

Prop	Type	Default	Description
childrenrequired	ReactNode	—	Text content
from	string	"#667eea"	Start color
via	string	"#764ba2"	Middle color
to	string	"#f093fb"	End color
duration	number	3	Cycle duration in seconds