Gradient Text React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import GradientText from "./GradientText";

export default function Example() {
  return (
    <GradientText
      text={"Stay curious."}
      colors={[
        "#f6b8a4",
        "#eee5ff",
        "#a99bff",
        "#f6b8a4"
      ]}
      duration={6}
      angle={110}
      animated={true}
    />
  );
}

Using Gradient Text

Use colors to define a palette with enough contrast against the page background. angle controls the direction of the colour band.

Set animated to false for a static gradient. The visible text still comes entirely from the text prop.

Props

Name	Type	Required	Default	Description
text	string	No	""	Text to render; font size and weight inherit from the caller.
colors	string[]	No	["#f6b8a4","#eee5ff","#a99bff","#f6b8a4"]	Gradient colour stops. A single colour renders a solid fill.
duration	number	No	6	Animation cycle duration in seconds.
angle	number	No	110	Gradient angle in degrees.
animated	boolean	No	true	Enable or disable the moving gradient.
className	string	No	""	Additional CSS classes, merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.