Animated Gradient Text

Free

An animated gradient background which transitions between colors for text.

The full demo as documented.

Customize

Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.

children

speed1

colorFrom

colorTo

Guide and examples

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/animated-gradient-text.json

Examples

Custom Speed

Open in

components/ui/animated-gradient-text-demo-2.tsx

import { AnimatedGradientText } from "@/components/ui/animated-gradient-text"

export function AnimatedGradientTextDemo() {
  return (
    <AnimatedGradientText
      speed={2}
      colorFrom="#4ade80"
      colorTo="#06b6d4"
      className="text-4xl font-semibold tracking-tight"
    >
      Fast Gradient
    </AnimatedGradientText>
  )
}

Usage

import { AnimatedGradientText } from "@/components/ui/animated-gradient-text"

<AnimatedGradientText>Animated Gradient Text</AnimatedGradientText>

Props

Prop	Type	Default	Description
`children`	`node`	`-`	The children passed into the component
`className`	`string`	`-`	The class name to be applied
`speed`	`number`	`1`	The speed of the gradient animation
`colorFrom`	`string`	`"#ffaa40"`	The starting color of the gradient
`colorTo`	`string`	`"#9c40ff"`	The ending color of the gradient

Guide and examples

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/animated-gradient-text.json

Examples

Custom Speed

Open in

components/ui/animated-gradient-text-demo-2.tsx

import { AnimatedGradientText } from "@/components/ui/animated-gradient-text"

export function AnimatedGradientTextDemo() {
  return (
    <AnimatedGradientText
      speed={2}
      colorFrom="#4ade80"
      colorTo="#06b6d4"
      className="text-4xl font-semibold tracking-tight"
    >
      Fast Gradient
    </AnimatedGradientText>
  )
}

Usage

import { AnimatedGradientText } from "@/components/ui/animated-gradient-text"

<AnimatedGradientText>Animated Gradient Text</AnimatedGradientText>

Props

Prop	Type	Default	Description
`children`	`node`	`-`	The children passed into the component
`className`	`string`	`-`	The class name to be applied
`speed`	`number`	`1`	The speed of the gradient animation
`colorFrom`	`string`	`"#ffaa40"`	The starting color of the gradient
`colorTo`	`string`	`"#9c40ff"`	The ending color of the gradient