Text Gradient
Open in
Default
Thinking...
Fast animation
Loading...
Large text
Analyzing Data
Wide spread
Generating response...
With spinner
Computing...
Within text

I am thinking about your question

Features

  • Moving gradient animation effect for text
  • Configurable animation duration
  • Customizable spread distance for gradient effect
  • Customizable highlight and base colors
  • Uses CSS background-clip for text masking
  • Smooth CSS animation with background-position
  • Fully typed with TypeScript
  • Inspired by Vercel's components.build

Component Props

TextGradient

  • children - React.ReactNode - The text content to display with the gradient effect
  • spread - number - The spread distance for the gradient effect in pixels (default: 22)
  • highlightColor - string - The background color for the gradient highlight (default: "hsl(var(--background))")
  • baseColor - string - The base text color (shows through the gradient) (default: "hsl(var(--muted-foreground))")
  • duration - number - Animation duration in seconds (default: 3)
  • className - string - Additional CSS classes to apply to the component

How It Works

The text gradient effect uses a clever combination of CSS properties to create a moving highlight:

  • Two-layer background: A moving transparent-to-highlight-to-transparent gradient layered over a solid base color
  • Background clipping: The bg-clip-text property clips the background to the text shape
  • CSS animation: Animates the background-position from 0% to 200% for a smooth scrolling effect
  • Custom properties: Uses CSS variables for easy customization of colors and spread