Gradient Text

Text filled with a slowly panning gradient via background-clip. Zero JS.

cssrsc2 files · 49 locdeps: clsx, tailwind-merge

Build beautiful things

SUNSET MODE

✦ Introducing OPUS UI 1.0

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/gradient-text.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs gradient-text

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

<h1>Build <GradientText>beautiful</GradientText> things</h1>

Prop	Type	Default	Description
colors	string[]	—	Stops (repeat the first at the end for a seamless pan).
duration	number	6	Seconds per pan (0 = static).
angle	number	90	Gradient angle.