Animated Gradient Text

An animated gradient background which transitions between colors for text.

Usage

Code

import React, { ReactNode } from "react";
import { cnBase } from "tailwind-variants";


export interface AnimatedGradientTextProps {
  children: ReactNode;
  className?: string;
}


export const AnimatedGradientText: React.FC<AnimatedGradientTextProps> = ({
  children,
  className
}) => {
  return (
    <div
      className={cnBase(
        "group relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-2xl bg-white/40 px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#8fdfff1f] backdrop-blur-sm transition-shadow duration-500 ease-out [--bg-size:300%] hover:shadow-[inset_0_-5px_10px_#8fdfff3f] dark:bg-black/40",
        className,
      )}
    >
      <div
        className={`absolute inset-0 block h-full w-full animate-gradient bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:var(--bg-size)_100%] p-[1px] ![mask-composite:subtract] [border-radius:inherit] [mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)]`}
      />


      {children}
    </div>
  )
}

Update tailwind.config.js

Add the following animations to your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      keyframes: {
        gradient: {
          to: {
            backgroundPosition: "var(--bg-size) 0",
          },
        },
      },
      animation: {
        gradient: "gradient 8s linear infinite",
      },
    },
  },
};

Props

AttributeTypeDescriptionDefault
childrenReact.ReactNodeThe children passed into the component.undefined
classNamestringThe class name to be applied.undefined
Animated Shiny TextWord Rotate