Installation

pnpm dlx @glinui/cli@latest add gradient-text

Credits. Adapted from Magic UI (MIT, (c) Magic UI). Merged gradient and shine variants, token colors, glass badge surface, forced colors fallback and reduced motion levels. Attribution details.

Prefer the package? npm install @glinui/ui @glinui/motion @glinui/tokens

Usage

Improvements: colors come from tokens, the badge wrapper ships with solid and glass surfaces, forced-colors fallback, and the sweep is a Web Animations API loop with no global keyframes. Not to be confused with Animated Gradient, which is a background.

import { GradientText } from "@glinui/ui"
export function GradientVariants() {
  return (

import { GradientText } from "@glinui/ui"


export function GradientVariants() {
  return (
    <div data-glin-theme="dark" className="flex w-full flex-col items-center gap-4 rounded-xl bg-[var(--surface-0)] p-8">
      <GradientText className="text-4xl font-semibold">Flow effect</GradientText>
      <GradientText effect="shine" className="text-4xl font-semibold">Shine effect</GradientText>
      <GradientText from="#38bdf8" to="#a78bfa" className="text-4xl font-semibold">Custom colors</GradientText>
      <div className="flex flex-wrap items-center justify-center gap-3">
        <GradientText badge>Badge</GradientText>
        <GradientText badge variant="outline">Outline badge</GradientText>
        <GradientText badge variant="glass">Glass badge</GradientText>
      </div>
    </div>
  )
}

Accessibility

• Plain inline text, fully selectable and readable.
• Under forced colors (Windows high contrast) the clip gradient is dropped and the text uses CanvasText, so it never disappears.
• Keep contrast in mind: pick from and to colors that pass 3:1 against the background for large text.

Reduced Motion

With prefers-reduced-motion or motion level none or subtle, the gradient is rendered static, with no sweep.

API Reference

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

import { GradientText } from "@glinui/ui"