Animated Gradient Text

Getting Started

Templates

Components

Special Effects

Animations

Text Animations

Device Mocks

Buttons

Backgrounds

Community

Examples

Custom Speed

Open in

Fast Gradient

import { AnimatedGradientText } from "@/registry/magicui/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>

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

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

Examples

Custom Speed

Open in

Fast Gradient

import { AnimatedGradientText } from "@/registry/magicui/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>

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

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

Animated Gradient Text

Installation

Examples

Custom Speed

Usage

Props

Animated Gradient Text

Installation

Examples

Custom Speed

Usage

Props