Motion

Gradient Text

Free, copy-pasteable Tailwind CSS & Framer Motion Gradient Text component. Accessible, fully responsive, dark-mode ready, and customizable.

On this page

Implementation Usage Default Gradient Custom Palettes Props

AI NewsletterRead →

How Machines Think

Sponsor Business Wish (500+ Devs)Claim this spot →

When standard typography isn't enough, flowing Tailwind gradient text commands user focus. Easily customizable with multi-stop color palettes, these Tailwind CSS animated text loops add subtle dynamism to your most important marketing copy without relying on heavy video assets.

Pair animated gradients with large typography in your primary Hero section or use it to highlight the active state in Tabs.

Implementation

"use client";

import React from "react";
import { cn } from "@/lib/utils";

interface GradientTextProps {
  children: React.ReactNode;
  className?: string;
  colors?: string[];
  animationSpeed?: number;
}

export const GradientText: React.FC<GradientTextProps> = ({
  children, className = "",
  colors = ["#1d1d1f", "#6e6e73", "#1d1d1f"],
  animationSpeed = 5,
}) => {
  const gradientColors = colors.join(", ");

  return (
    <span className={cn("inline-block bg-clip-text text-transparent animate-gradient-flow", className)}
      style={{
        backgroundImage: `linear-gradient(90deg, ${gradientColors})`,
        backgroundSize: "200% 100%",
        animationDuration: `${animationSpeed}s`,
      }}>
      {children}
    </span>
  );
};

Usage

Default Gradient

Motion preview

Think different.

<GradientText className="text-5xl font-semibold tracking-tight">
  Think different.
</GradientText>

Custom Palettes

Motion preview

IntelligencePerformanceCraft

<GradientText colors={["#0071e3", "#40a9ff", "#0071e3"]} animationSpeed={4}>
  Intelligence
</GradientText>
<GradientText colors={["#bf4800", "#ff9500", "#bf4800"]} animationSpeed={6}>
  Performance
</GradientText>

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Text content
`className`	`string`	`""`	Additional CSS classes
`colors`	`string[]`	`["#1d1d1f", "#6e6e73", "#1d1d1f"]`	Color stops
`animationSpeed`	`number`	`5`	Duration in seconds

Shimmer Button

Fade In