Gradient Text

Motion

Flowing Tailwind gradient text and Tailwind CSS animated text effects to draw immediate attention to key messaging.

On this page

Implementation Usage Default Gradient Custom Palettes Props

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

Think different.

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

Custom Palettes

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