漸層掃光文字 Gradient Shine Text｜免費 React 元件

流動漸層文字疊加週期掃光，純 CSS keyframes，深淺色自適應。

把這個效果裝進你的專案

在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。

npx webberui@latest add gradient-shine-text

Gradient Shine Text 是用 React 與純 CSS @keyframes 做的漸層文字（gradient text）動畫元件：以 background-clip: text 讓漸層在文字裡流動，上面再疊一道週期掃過的高光，不依賴 Motion 或其他動畫套件。

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

文字內容text

流動週期（秒）duration

掃光高光shine

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

編輯中的呼叫預設屬性

<GradientShineText/>

    </div>
  );
}

完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。

適用情境

首頁 hero 標題中，只強調產品名稱或一個關鍵詞。
新功能公告、版本發布頁的大標。
定價頁「推薦方案」的標籤或方案名稱。
活動頁倒數、主視覺上的短句標語。

安裝

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

或在 components.json 設定 registries 後，改用 @webberui/gradient-shine-text 安裝。

使用

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

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

// 自訂漸層色與週期，或關閉掃光
<GradientShineText colors={["#0ea5e9", "#34d399"]} duration={8} shine={false}>
  漸層流動，也支援中文。
</GradientShineText>

範例

只強調標題中的一段文字

外層用一般的 h1，需要強調的詞包在 GradientShineText 裡，預設渲染為 span，不會打斷標題的語意。

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

<h1 className="text-4xl font-bold tracking-tight md:text-6xl">
  用 <GradientShineText>一個工作區</GradientShineText> 管理所有客戶回饋
</h1>

渲染成標題元素並套用品牌色

as 可以改成 h2 等任何標籤；colors 依序排列，元件會自動把第一個顏色接在最後，讓循環沒有接縫。duration 越大流動越慢。

<GradientShineText
  as="h2"
  text="2026 年度產品更新"
  colors={["#0ea5e9", "#6366f1", "#22c55e"]}
  duration={10}
  className="text-3xl font-semibold"
/>

不加掃光的靜態感漸層

shine={false} 只保留緩慢流動的漸層，適合放在小字的標籤上，避免高光在小尺寸上顯得雜亂。

<GradientShineText shine={false} duration={12} className="text-xs font-semibold uppercase tracking-wider">
  推薦方案
</GradientShineText>

Props

Prop	型別	預設值	說明
`text`	`string`	—	要呈現的文字（與 `children` 擇一）
`children`	`ReactNode`	—	自訂內容，優先於 `text`
`colors`	`string[]`	內建三色漸層	漸層色依序排列，會自動首尾相接以無縫循環
`duration`	`number`	`6`	一輪流動週期（秒），掃光在每輪前段掃過一次
`shine`	`boolean`	`true`	是否疊加週期性掃過的高光帶
`as`	`React.ElementType`	`"span"`	渲染的元素標籤
`className`	`string`	—	附加樣式（字級、字重等在此設定）

細節

純 CSS 動畫：@keyframes 由元件內嵌 <style> 注入，安裝到任何專案都不需修改 Tailwind 設定或全域 CSS，也沒有 hydration 閃爍問題
無縫循環：流動漸層自動首尾同色，每輪位移正好一個圖寬，background-repeat 下循環無接縫
掃光層：第二層 no-repeat 的窄幅高光帶疊在漸層上，每輪前 45% 掃過一次，其餘時間停在畫面外
深淺色模式：預設配色以 --wb-gst-* CSS 變數定義（以 :where 壓低特異度），.dark 下自動換成亮色系，也可直接用 colors 完全自訂

可及性

文字是真實 DOM 文字（background-clip: text 只影響上色），螢幕閱讀器照常朗讀、可搜尋可選取
使用者系統開啟「減少動態效果」時停止動畫，顯示靜態漸層（掃光停留在畫面外不可見）

常見問題

需要修改 Tailwind 設定或全域 CSS 嗎？

不需要。@keyframes 與預設色變數由元件內嵌的 <style> 注入，安裝依賴只有 clsx 與 tailwind-merge。字級、字重等樣式直接寫在 className。

對 SEO 和螢幕閱讀器有影響嗎？

沒有負面影響。文字是真實的 DOM 文字，background-clip: text 只改變上色方式，搜尋引擎與螢幕閱讀器都能正常讀取，使用者也能選取與複製；搭配 as="h1" 等標籤可以保留標題語意。

深色模式怎麼切換顏色？

未傳 colors 時，預設配色來自 --wb-gst-* CSS 變數，祖先元素有 .dark class 時自動換成較亮的配色。只依 prefers-color-scheme 切換、沒有 .dark class 的網站不會套用深色配色，可以改用 colors 自行指定。

可以在 Next.js App Router 使用嗎？

可以。原始碼開頭有 "use client"，在 Server Component 頁面直接 import 即可；動畫完全由 CSS 執行，沒有在掛載後才啟動的 JavaScript。

減少動態效果時會怎樣？

系統開啟「減少動態效果」時，CSS media query 會移除動畫，文字停在靜態漸層，掃光留在畫面外不顯示。

Gradient Shine Text

把這個效果裝進你的專案

本頁目錄