Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.

Command Palette

Search for a command to run...

Docs
Animated Gradient Text

Animated Gradient Text

An animated gradient background which transitions between colors for text.

🎉
Introducing Magic UI

Installation

Examples

Custom Speed

Fast Gradient

Usage

import { AnimatedGradientText } from "@/components/magicui/animated-gradient-text";
<AnimatedGradientText>Animated Gradient Text</AnimatedGradientText>

Props

PropTypeDefaultDescription
childrennode-The children passed into the component
classNamestring-The class name to be applied
speednumber1The speed of the gradient animation
colorFromstring"#ffaa40"The starting color of the gradient
colorTostring"#9c40ff"The ending color of the gradient