Gradient Text

Headline text with a slowly flowing, seamlessly looping gradient.

Think beyond ordinary.

Customize

Text

Color 1

#5FAEB4

Color 2

#E4DCCF

Color 3

#A56D5B

Duration (s)6

Usage

usage.tsx

import { GradientText } from "@/components/motionkit/gradient-text";

<GradientText
  as="h1"
  className="text-5xl font-semibold"
>
  Think beyond ordinary.
</GradientText>

Motion

The exact curves this component runs, plotted with Motion's own maths.

Colour flow

Runs on its own

tween · linear6.0s per loop

Installation

Works in the App Router as is. Requires Tailwind CSS v4.

1. Install the dependencies

terminal

npm install motion

2. Copy the component

Save as components/motionkit/gradient-text.tsx.

components/motionkit/gradient-text.tsx

"use client";

import type { ElementType, ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";

type GradientTextProps = {
  children: ReactNode;
  /** Gradient stops, left to right. The first color is repeated to make the loop seamless. */
  colors?: string[];
  /** Seconds per full loop. */
  duration?: number;
  /** Wrapping element, e.g. "h1". */
  as?: ElementType;
  className?: string;
};

export function GradientText({
  children,
  colors = ["#5FAEB4", "#E4DCCF", "#A56D5B"],
  duration = 6,
  as: Tag = "span",
  className = "",
}: GradientTextProps) {
  const reduceMotion = useReducedMotion();

  return (
    <Tag className={className}>
      <motion.span
        className="bg-clip-text text-transparent [background-size:200%_auto] [box-decoration-break:clone]"
        style={{ backgroundImage: `linear-gradient(90deg, ${[...colors, colors[0]].join(", ")})` }}
        animate={reduceMotion ? undefined : { backgroundPosition: ["0% 50%", "200% 50%"] }}
        transition={{ duration, repeat: Infinity, ease: "linear" }}
      >
        {children}
      </motion.span>
    </Tag>
  );
}

Props

Prop	Type	Default	Description
colors	string[]	["#5FAEB4", "#E4DCCF", "#A56D5B"]	Gradient stops, left to right.
duration	number	6	Seconds per full loop.
as	ElementType	"span"	Wrapping element, e.g. "h1".

Accessibility

Audited against WCAG 2.2 AA

Keyboard: Not applicable; Text only, nothing to focus.
Screen readers: Pass; Real text, read normally. The gradient is pure CSS.
Reduced motion: Partial; The gradient holds still for reduced-motion users. It loops forever otherwise, so if it sits beside other content for more than 5 seconds, WCAG 2.2.2 asks you to add a pause control.
Colour contrast: Partial; The lowest default stop (Clay) measures exactly 4.5:1 on the dark surface, so it passes AA but has no margin. Re-check if you change the colours or background.

Related components

Liquid light

Liquid Gradient Text

Pools of colour swirl and flow inside the letters, for headings that feel alive without moving an inch.

Now in public beta

Shiny Text

A narrow glint of light sweeps across the letters every few seconds, like light catching metal.

We build
design systems, landing pages, online stores

Typewriter

Types a phrase, pauses, backspaces and types the next, with a human rhythm and a caret that blinks only at rest.

All animated text →

NextText Scramble →

"use client"; import type { ElementType, ReactNode } from "react"; import { motion, useReducedMotion } from "motion/react"; type GradientTextProps = { children: ReactNode; /** Gradient stops, left to right. The first color is repeated to make the loop seamless. */ colors?: string[]; /** Seconds per full loop. */ duration?: number; /** Wrapping element, e.g. "h1". */ as?: ElementType; className?: string; }; export function GradientText({ children, colors = ["#5FAEB4", "#E4DCCF", "#A56D5B"], duration = 6, as: Tag = "span", className = "", }: GradientTextProps) { const reduceMotion = useReducedMotion(); return ( <Tag className={className}> <motion.span className="bg-clip-text text-transparent [background-size:200%_auto] [box-decoration-break:clone]" style={{ backgroundImage: `linear-gradient(90deg, ${[...colors, colors[0]].join(", ")})` }} animate={reduceMotion ? undefined : { backgroundPosition: ["0% 50%", "200% 50%"] }} transition={{ duration, repeat: Infinity, ease: "linear" }} > {children} </motion.span> </Tag> ); }

Prop

Type

Default

Description

colors

string[]

["#5FAEB4", "#E4DCCF", "#A56D5B"]

Gradient stops, left to right.

duration

number

Seconds per full loop.

ElementType

"span"

Wrapping element, e.g. "h1".

Accessibility

Audited against WCAG 2.2 AA

Keyboard: Not applicable; Text only, nothing to focus.
Screen readers: Pass; Real text, read normally. The gradient is pure CSS.
Reduced motion: Partial; The gradient holds still for reduced-motion users. It loops forever otherwise, so if it sits beside other content for more than 5 seconds, WCAG 2.2.2 asks you to add a pause control.
Colour contrast: Partial; The lowest default stop (Clay) measures exactly 4.5:1 on the dark surface, so it passes AA but has no margin. Re-check if you change the colours or background.