# Gradient Text

> Heading text with a slowly flowing gradient fill.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/components/gradient-text
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/gradient-text.json
```

Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Dependencies

No extra dependencies.

## Usage

```tsx title="components/gradient-text-demo.tsx"
import { GradientText } from "@/components/gradient-text"

export default function GradientTextDemo() {
  return (
    <h1 className="text-center text-5xl font-semibold tracking-tight sm:text-7xl">
      Ship <GradientText>beautiful</GradientText>
      <br />
      interfaces
    </h1>
  )
}
```

## Source

```tsx title="components/gradient-text.tsx"
import * as React from "react"

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

const keyframes = `@keyframes gradient-text-flow{0%{background-position:0% 50%}100%{background-position:200% 50%}}`

export interface GradientTextProps extends React.ComponentProps<"span"> {
  /** Gradient stops, left to right */
  colors?: string[]
  /** Seconds per full cycle */
  duration?: number
}

export function GradientText({
  colors = ["#f97316", "#ec4899", "#8b5cf6", "#06b6d4", "#f97316"],
  duration = 6,
  className,
  style,
  ...props
}: GradientTextProps) {
  return (
    <>
      <style href="gradient-text" precedence="default">
        {keyframes}
      </style>
      <span
        className={cn("inline-block bg-clip-text text-transparent", className)}
        style={{
          backgroundImage: `linear-gradient(90deg, ${colors.join(", ")})`,
          backgroundSize: "200% auto",
          animation: `gradient-text-flow ${duration}s linear infinite`,
          ...style,
        }}
        {...props}
      />
    </>
  )
}
```