Animated Gradient Text

An animated gradient background which transitions between colors for text.

MMagic UI·byMUMagic UIPro

7,094

Bookmarks

13,294

Installs

131,894

Views

29 lines

import { ChevronRight } from "lucide-react"

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

export default function AnimatedGradientTextDemo() {
  return (
    <div className="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