Gradient Shine Text
A free CSS gradient text effect with a periodic specular shine sweep.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- CSS and React
- No runtime packages
Gradient Shine Text is a free text effect component for Next.js and React that fills a headline with a brand gradient and sweeps a narrow specular highlight through the glyphs once every four seconds. The fill is a static CSS linear gradient applied with background-clip, styled with Tailwind semantic tokens, so the gradient text renders before any JavaScript runs.
The shine is a near-white stop inside an oversized background, moved by a single background-position keyframe that repaints only the clipped glyph box, so there is no layout work at all. An IntersectionObserver pauses the sweep while the text is fully offscreen, screen readers receive the children as ordinary DOM text exactly once, and with prefers-reduced-motion enabled the component renders the static gradient with no movement.
Template Empire
Gradient text that catches the light
The fill is a static brand gradient, visible before any JavaScript runs. Every four seconds a narrow specular band sweeps through the glyphs, then the text rests. Scroll it fully out of view and the sweep pauses; enable reduced motion and the gradient simply stands still.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/text-gradient-shineUsage
import { TextGradientShine } from "@/components/text-gradient-shine";
export function Example() {
return (
<h1 className="text-5xl font-semibold tracking-tight">
Ship pages that <TextGradientShine>catch the light</TextGradientShine>
</h1>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | The text to fill with the gradient. |
| as | ElementType | "span" | Wrapper element rendered around the text, e.g. "span", "h2". |
| className | string | undefined | Additional classes merged onto the wrapper. |
Customisation
Gradient Shine Text exposes three component tokens, declared in its registry item: --shine-from and --shine-to for the two gradient stops (defaulting to the brand and accent ramps) and --shine-dur for the time one full shine cycle takes (defaulting to 4s). Override them from :root, or on any ancestor of the component, to retheme the fill or retune the pace without touching the code:
:root {
--shine-from: var(--color-brand-500);
--shine-to: var(--color-brand-400);
--shine-dur: 6s;
}Frequently asked questions
- Is Gradient Shine Text free for commercial use?
- Yes. Gradient Shine Text is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Gradient Shine Text accessible and does the sweep hurt performance?
- The children are ordinary DOM text, so screen readers announce them exactly once with no extra markup. The sweep animates only background-position inside the clipped glyph box, which repaints a small fixed region with zero layout work, and an IntersectionObserver pauses it while the text is fully offscreen. With prefers-reduced-motion enabled the keyframe never applies and the text renders as a static gradient.
- How do I change the gradient colours or the shine speed?
- Override the --shine-from and --shine-to custom properties from :root or any ancestor element to change the two gradient stops, and --shine-dur to change how long one full shine cycle takes. The component reads all three tokens with its defaults as fallbacks, so no code changes are needed.