# Text Gradient Flow — React Text Animation

> A seamless multi-stop gradient that travels through the letters on a loop, with an optional blurred glow of the same gradient behind.

- Category: [Text Effects](https://pixelpapa.com/components/text.md)
- Tags: text, gradient, animated, glow, headline
- Dependencies: none (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/text/text-gradient-flow

## Install

```bash
npx shadcn@latest add "https://pixelpapa.com/r/text-gradient-flow.json"
```

The file is written to `components/pixelpapa/text-gradient-flow.tsx`. To install manually, copy the source below into your project. It imports `cn` from `@/lib/utils`, which every shadcn project has.

## Source

```tsx
"use client";

import type { CSSProperties, ReactNode } from "react";
import { cn } from "@/lib/utils";

type TextGradientFlowProps = {
  children: ReactNode;
  className?: string;
  /** Any CSS colours. The first one is repeated at the end so the loop has no seam. */
  colors?: string[];
  /** Seconds for one full pass. */
  speed?: number;
  /** Gradient angle in degrees. */
  angle?: number;
  /** Render a soft blurred copy behind the text. */
  glow?: boolean;
};

export function TextGradientFlow({
  children,
  className,
  colors = ["var(--primary)", "var(--chart-2)", "var(--chart-3)"],
  speed = 6,
  angle = 90,
  glow = false,
}: TextGradientFlowProps) {
  const stops = [...colors, colors[0]].join(", ");
  const paint: CSSProperties = {
    backgroundImage: `linear-gradient(${angle}deg, ${stops})`,
    backgroundSize: "200% 100%",
    WebkitBackgroundClip: "text",
    backgroundClip: "text",
    color: "transparent",
    animation: `pp-text-gradient-flow-move ${speed}s linear infinite`,
  };

  return (
    <span className={cn("relative inline-block", className)}>
      <style>{`
        @keyframes pp-text-gradient-flow-move { to { background-position: -200% 0; } }
        @media (prefers-reduced-motion: reduce) { .pp-text-gradient-flow { animation: none !important; } }
      `}</style>
      {glow && (
        <span
          aria-hidden
          className="pp-text-gradient-flow pointer-events-none absolute inset-0 opacity-40 blur-2xl select-none dark:opacity-60"
          style={paint}
        >
          {children}
        </span>
      )}
      {/* Padding keeps descenders inside the clipped background. */}
      <span className="pp-text-gradient-flow relative inline-block pb-[0.12em]" style={paint}>
        {children}
      </span>
    </span>
  );
}

const palettes: { label: string; colors: string[] }[] = [
  { label: "Theme", colors: ["var(--primary)", "var(--chart-2)", "var(--chart-3)"] },
  { label: "Ember", colors: ["#f97316", "#f43f5e", "#f59e0b"] },
  { label: "Lagoon", colors: ["#10b981", "#06b6d4", "#84cc16"] },
];

export default function TextGradientFlowDemo() {
  return (
    <div className="w-full max-w-2xl px-4 text-center">
      <h2 className="text-5xl leading-[1.05] font-semibold tracking-tight text-balance text-foreground sm:text-6xl">
        Colour that keeps{" "}
        <TextGradientFlow glow speed={5}>
          moving
        </TextGradientFlow>{" "}
        through every letter
      </h2>
      <div className="mt-10 flex flex-wrap items-center justify-center gap-3">
        {palettes.map((p, i) => (
          <span
            key={p.label}
            className="rounded-full border border-border bg-card px-4 py-1.5 text-sm font-semibold shadow-sm"
          >
            <TextGradientFlow colors={p.colors} speed={4 + i}>
              {p.label}
            </TextGradientFlow>
          </span>
        ))}
      </div>
    </div>
  );
}
```

## AI prompt

```text
Add the "Text Gradient Flow" component from PixelPapa UI to this project.

What it is: A seamless multi-stop gradient that travels through the letters on a loop, with an optional blurred glow of the same gradient behind.
Category: Text Effects. Depends on: no extra packages.

1. Install it with the shadcn CLI:
   npx shadcn@latest add "https://pixelpapa.com/r/text-gradient-flow.json"
   (If the CLI is unavailable, fetch that URL, write files[0].content to components/pixelpapa/text-gradient-flow.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/text-gradient-flow" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More text effects

- [Blur Reveal Text](https://pixelpapa.com/components/text/blur-reveal-text.md): Words rise out of a blur one after another when the text scrolls into view.
- [Text Circular Rotating](https://pixelpapa.com/components/text/text-circular-rotating.md) (Pro): Text set on a circle that spins continuously and eases down to a crawl on hover, with a slot in the middle for an icon or button.
- [Text Counting Number](https://pixelpapa.com/components/text/text-counting-number.md) (Pro): A spring-driven count-up with locale formatting, prefix, suffix and decimals; writes straight to the DOM so it never re-renders.
- [Text Glitch Slice](https://pixelpapa.com/components/text/text-glitch-slice.md) (Pro): The word is cut into horizontal strips that jolt sideways in short bursts, with two colour ghosts splitting off underneath.
- [Text Highlight Marker](https://pixelpapa.com/components/text/text-highlight-marker.md) (Pro): Hand-drawn marker strokes (highlight, underline or circle) draw themselves behind words when they scroll into view.
- [Text Letters Pull Up](https://pixelpapa.com/components/text/text-letters-pull-up.md) (Pro): Each letter springs up from behind a mask with a slight tilt, staggered across the line when it enters the viewport.