Gradient Shine Text

A flowing gradient text with a periodic shine sweep on top — pure CSS keyframes, adapting to light and dark themes.

Loading preview…

npx shadcn@latest add https://webberui.com/r/gradient-shine-text.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Texttext

Flow cycle (s)duration

Sweep highlightshine

<GradientShineText />

Installation

npx shadcn@latest add https://webberui.com/r/gradient-shine-text.json

Or, once registries are configured in components.json, install it as @webberui/gradient-shine-text.

Usage

import { GradientShineText } from "@/components/ui/gradient-shine-text";

<GradientShineText
  text="Beautiful by default."
  className="text-4xl font-bold"
/>

// Custom gradient colors and cycle, or turn the shine off
<GradientShineText colors={["#0ea5e9", "#34d399"]} duration={8} shine={false}>
  The gradient flows, and it supports Chinese too.
</GradientShineText>

Props

Prop	Type	Default	Description
`text`	`string`	—	The text to render (use either this or `children`)
`children`	`ReactNode`	—	Custom content, which takes precedence over `text`
`colors`	`string[]`	built-in three-color gradient	Gradient colors in order; the first is appended to the end automatically for a seamless loop
`duration`	`number`	`6`	One flow cycle (seconds); the shine sweeps once early in each cycle
`shine`	`boolean`	`true`	Whether to overlay a periodically sweeping highlight band
`as`	`React.ElementType`	`"span"`	The element tag to render
`className`	`string`	—	Extra styles (set font size, weight, and so on here)

How it works

Pure CSS animation: the @keyframes are injected by an inline <style> inside the component, so installing it into any project requires no changes to the Tailwind config or the global stylesheet, and there is no hydration flash
Seamless loop: the flowing gradient automatically matches its first and last color, and each cycle offsets by exactly one tile width, so it loops without a seam under background-repeat
Shine layer: a second, no-repeat narrow highlight band sits on top of the gradient, sweeping across during the first 45% of each cycle and parking off-screen the rest of the time
Light and dark modes: the default colors are defined as --wb-gst-* CSS variables (wrapped in :where to keep specificity low), which automatically switch to a brighter set under .dark; colors can also override them entirely

Accessibility

The text is real DOM text (background-clip: text only affects the coloring), so screen readers announce it normally and it remains searchable and selectable
When the user has "reduce motion" enabled at the system level, the animation stops and a static gradient is shown (the shine parks off-screen and stays invisible)