React Gradient Text

Powered by

Framer Motion

Motion

Ever seen gradient text that looks like someone spilled paint? Most implementations just slap a static gradient and call it a day. This component actually animates the gradient smoothly, creating that flowing color effect you see in modern interfaces. No janky transitions, no rainbow disasters.

Animated gradient text effects

Text with smooth flowing gradients that don't hurt your eyes:

'use client';import { GradientText } from '@/components/ui/shadcn-io/gradient-text'; export const GradientTextDemo = () => {  return <GradientText className="text-4xl font-bold" text="Gradient Text" />;};export default GradientTextDemo;

'use client'; import * as React from 'react';import { motion, type Transition } from 'motion/react'; import { cn } from '@/lib/utils'; type GradientTextProps = React.ComponentProps<'span'> & {  text: string;  gradient?: string;  neon?: boolean;  transition?: Transition;}; function GradientText({  text,  className,  gradient = 'linear-gradient(90deg, #3b82f6 0%, #a855f7 20%, #ec4899 50%, #a855f7 80%, #3b82f6 100%)',  neon = false,  transition = { duration: 3, repeat: Infinity, ease: 'linear' },  ...props}: GradientTextProps) {  const baseStyle: React.CSSProperties = {    backgroundImage: gradient,  };   return (    <span      data-slot="gradient-text"      className={cn('relative inline-block', className)}      {...props}    >      <motion.span        className="m-0 text-transparent bg-clip-text bg-[length:200%_100%]"        style={baseStyle}        animate={{ backgroundPositionX: ['0%', '200%'] }}        transition={transition}      >        {text}      </motion.span>       {neon && (        <motion.span          className="m-0 absolute top-0 left-0 text-transparent bg-clip-text blur-[8px] mix-blend-plus-lighter bg-[length:200%_100%]"          style={baseStyle}          animate={{ backgroundPositionX: ['0%', '200%'] }}          transition={transition}        >          {text}        </motion.span>      )}    </span>  );} export { GradientText, type GradientTextProps };

Built with TypeScript and shadcn/ui, using Framer Motion for buttery smooth animations in React applications. The gradient flows naturally across the text, and you can enable neon glow effects for that cyberpunk aesthetic without looking like a Vegas casino in your Next.js projects.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/gradient-text.json

npx shadcn@latest add https://www.shadcn.io/registry/gradient-text.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/gradient-text.json

bunx shadcn@latest add https://www.shadcn.io/registry/gradient-text.json

Usage

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

<GradientText
  text="Smooth flowing gradients"
  gradient="linear-gradient(90deg, #3b82f6 0%, #a855f7 50%, #ec4899 100%)"
/>;

Why most gradient text looks terrible

Most developers either use static gradients (boring) or animate them with CSS keyframes (choppy) in their React components. The problem? CSS animations can't smoothly interpolate complex gradients, so you get these jarring color jumps in JavaScript applications.

This React component moves the gradient background position instead of morphing colors, with full TypeScript support for precise control. The gradient itself stays consistent—we just slide it across the text. Result? Smooth, continuous color flow that your eyes can actually follow in Next.js projects.

Plus, when developers add "neon effects," they usually just throw a text-shadow and call it done. Looks fake. This component layers a blurred duplicate with proper blend modes, creating actual light bleed like real neon signs in modern JavaScript frameworks.

Examples

Neon cyberpunk effect

For when you want that futuristic vibe without looking like a 90s hacker movie:

'use client';import { GradientText } from '@/components/ui/shadcn-io/gradient-text'; export const GradientTextNeonDemo = () => {  return (    <GradientText       className="text-4xl font-bold"       text="Neon Gradient"       neon      gradient="linear-gradient(90deg, #00ff00 0%, #00ffff 25%, #ff00ff 50%, #00ffff 75%, #00ff00 100%)"    />  );};export default GradientTextNeonDemo;

'use client'; import * as React from 'react';import { motion, type Transition } from 'motion/react'; import { cn } from '@/lib/utils'; type GradientTextProps = React.ComponentProps<'span'> & {  text: string;  gradient?: string;  neon?: boolean;  transition?: Transition;}; function GradientText({  text,  className,  gradient = 'linear-gradient(90deg, #3b82f6 0%, #a855f7 20%, #ec4899 50%, #a855f7 80%, #3b82f6 100%)',  neon = false,  transition = { duration: 3, repeat: Infinity, ease: 'linear' },  ...props}: GradientTextProps) {  const baseStyle: React.CSSProperties = {    backgroundImage: gradient,  };   return (    <span      data-slot="gradient-text"      className={cn('relative inline-block', className)}      {...props}    >      <motion.span        className="m-0 text-transparent bg-clip-text bg-[length:200%_100%]"        style={baseStyle}        animate={{ backgroundPositionX: ['0%', '200%'] }}        transition={transition}      >        {text}      </motion.span>       {neon && (        <motion.span          className="m-0 absolute top-0 left-0 text-transparent bg-clip-text blur-[8px] mix-blend-plus-lighter bg-[length:200%_100%]"          style={baseStyle}          animate={{ backgroundPositionX: ['0%', '200%'] }}          transition={transition}        >          {text}        </motion.span>      )}    </span>  );} export { GradientText, type GradientTextProps };

Features

• Smooth gradient animations that don't cause seizures in React applications
• Neon glow effects that actually look like real neon in JavaScript projects
• Any CSS gradient works (linear, radial, conic) with Next.js compatibility
• 60fps animations using Framer Motion optimization for performance
• Complete TypeScript support with full type definitions and IntelliSense
• Works seamlessly with shadcn/ui typography classes out of the box
• Free open source component that respects user motion preferences

API Reference

GradientText

Animated gradient text with flowing color effects.

Gradient Presets

Common gradient combinations that actually look good:

Common gotchas

Gradient looks choppy: Make sure your gradient has enough color stops and the animation duration isn't too fast in React applications. 50 seconds is the sweet spot for smooth flow with TypeScript timing controls.

Text becomes unreadable: High contrast gradients with neon effects can hurt readability in JavaScript implementations. Test with actual content, not just "Hello World."

Performance issues on mobile: The blur effect for neon mode is expensive in React components. Consider disabling neon on lower-end devices or add a reduced motion check in Next.js projects.

Background clips incorrectly: Some browsers handle background-clip: text differently. This component includes fallbacks, but always test across browsers in your JavaScript applications.

Animation stutters: If you're updating the text prop frequently in your React application, the animation restarts each time. For dynamic content, consider using a key prop to control when to restart.

Integration with other components

Perfect for hero sections with Card components as backgrounds in React applications. Combine with Button for call-to-action text in Next.js projects. Works well with Badge components for status indicators with style.

For complete brand experiences, pair with Avatar for profile names or Tabs for navigation with personality. This free open source component's animation speed matches well with Skeleton loading states, all with complete TypeScript integration.

Questions developers actually ask