Animated Gradient Text

PreviewCode

🎉

---

Introducing Magic UI

@/demos/AnimatedGradientTextDemo.tsx

import { ChevronRight } from 'lucide-solid'
import { cn } from '@/lib/utils'
import { AnimatedGradientText } from '@/registry/magicui/animated-gradient-text'

export function AnimatedGradientTextDemo() {
  return (
    <div class="
      group relative mx-auto flex items-center justify-center rounded-full px-4
      py-1.5 shadow-[inset_0_-8px_10px_#8fdfff1f] transition-shadow duration-500
      ease-out
      hover:shadow-[inset_0_-5px_10px_#8fdfff3f]
    "
    >
      <span
        class={cn(
          `
            absolute inset-0 block size-full animate-gradient rounded-[inherit]
            bg-linear-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50
            bg-size-[300%_100%] p-px
          `,
        )}
        style={{
          '-webkit-mask': 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
          '-webkit-mask-composite': 'destination-out',
          'mask': 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
          'mask-composite': 'subtract',
          '-webkit-clip-path': 'padding-box',
        }}
      />
      🎉
      {' '}
      <hr class="mx-2 h-4 w-px shrink-0 bg-neutral-500" />
      <AnimatedGradientText class="text-sm font-medium">
        Introducing Magic UI
      </AnimatedGradientText>
      <ChevronRight class="
        ml-1 size-4 stroke-neutral-500 transition-transform duration-300
        ease-in-out
        group-hover:translate-x-0.5
      "
      />
    </div>
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/animated-gradient-text

bun

bunx shadcn@latest add @magicui-solid/animated-gradient-text

yarn

yarn dlx shadcn@latest add @magicui-solid/animated-gradient-text

npm

npx shadcn@latest add @magicui-solid/animated-gradient-text

Example

Custom Speed

PreviewCode

Fast Gradient

@/demos/AnimatedGradientTextDemo2.tsx

import { AnimatedGradientText } from '@/registry/magicui/animated-gradient-text'

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

Usage

import { AnimatedGradientText } from '@/components/magicui/animated-gradient-text'

<AnimatedGradientText>Animated Gradient Text</AnimatedGradientText>

Props

Prop	Type	Default	Description
children	JSX.Element	-	The children passed into the component
class	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

Original:

magicui.design/docs/components/animated-gradient-text