網格漸層背景 Gradient Mesh｜免費 React 元件

網格漸層背景：五個柔和 radial-gradient 色點以 transform 緩慢漂移，交織成流動的 mesh。

把這個效果裝進你的專案

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

npx webberui@latest add gradient-mesh

Gradient Mesh 是用 React、Tailwind CSS 與 Motion 做的網格漸層（mesh gradient）動態背景元件：五個模糊的 radial-gradient 色點各自以不同週期緩慢漂移，疊出持續流動的漸層，前景內容直接放進 children。

Playground

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

漂移倍速speed

import * as React from "react";

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

編輯中的呼叫預設屬性

<GradientMesh/>

    </div>
  );
}

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

適用情境

SaaS 或 App 登陸頁的 hero 背景，放主標題與行動按鈕。
註冊、登入頁的半邊視覺區，或等候名單頁的整頁背景。
價格方案、功能亮點區塊的大卡片底圖，用品牌色調配色。
活動頁或產品發表的橫幅區塊。
不適合：想要更大面積、帶噪點或滑鼠跟隨的流動色塊，可以看 Aurora Background。

安裝

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

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

使用

前景內容直接放進 children，佈局（如置中、高度）寫在 className 上：

import { GradientMesh } from "@/components/ui/gradient-mesh";

<GradientMesh className="flex min-h-[400px] items-center justify-center">
  <h1 className="text-4xl font-bold">Hero 標題</h1>
</GradientMesh>

自訂配色與漂移速度：

<GradientMesh
  colors={["#f0abfc", "#c4b5fd", "#7dd3fc", "#6ee7b7"]}
  speed={1.5}
  className="flex h-[320px] items-center justify-center rounded-2xl"
>
  <p className="text-lg">更快、更粉的 mesh</p>
</GradientMesh>

範例

Hero 區塊搭配行動按鈕

className 決定高度與排版，標題和按鈕放在 children，會疊在漸層之上。

import { GradientMesh } from "@/components/ui/gradient-mesh";

export function Hero() {
  return (
    <GradientMesh className="flex min-h-[520px] flex-col items-center justify-center gap-6 px-6 text-center">
      <h1 className="max-w-2xl text-5xl font-semibold tracking-tight">
        把團隊文件整理在同一個地方
      </h1>
      <a href="/signup" className="rounded-full bg-neutral-900 px-5 py-2.5 text-sm font-medium text-white dark:bg-white dark:text-neutral-900">
        免註冊試用
      </a>
    </GradientMesh>
  );
}

兩色品牌配色

colors 依序對應五個色點，數量不足時會循環取用；只傳兩個顏色就會交錯出現。

<GradientMesh
  colors={["#2563eb", "#14b8a6"]}
  className="h-[360px] rounded-3xl"
/>

卡片背景、放慢速度

speed 是漂移倍速，小於 1 會更慢；搭配 rounded-* 與固定高度做成卡片底圖。

<GradientMesh speed={0.5} className="rounded-2xl p-8">
  <h3 className="text-lg font-semibold">團隊方案</h3>
  <p className="mt-2 text-sm text-neutral-600 dark:text-neutral-300">
    共用工作區、權限設定與稽核紀錄。
  </p>
</GradientMesh>

Props

Prop	型別	預設值	說明
`colors`	`string[]`	柔和多彩配色	mesh 色點顏色，依序對應各色點，不足時循環取用
`speed`	`number`	`1`	漂移倍速，數值越大流動越快（週期除以此值）
`children`	`React.ReactNode`	—	前景內容，疊在 mesh 之上
`className`	`string`	—	附加到最外層容器的 class

細節

效能：只動 transform。 每個色點的漂移全部走 x / y，不觸碰 top / left，不觸發 layout 與 paint；will-change 由 Motion 在動畫期間自動管理，毋須手動設定
每個色點的 x 軸與 y 軸各自使用不同週期（12s–22s）搭配 repeat: Infinity + repeatType: "mirror"，兩軸錯開後色點走出弧形軌跡，五點之間永不同步，看起來像自然流動的 mesh
色點是 blur-3xl 的 radial-gradient 圓形，模糊由 GPU 合成一次後隨 transform 平移，成本固定，不隨動畫累加
背景層整層 pointer-events-none 並以 -z-10 沉到內容之下（容器有 isolate 建立獨立堆疊上下文），前景互動完全不受影響
speed 會做防呆：非正數時回退為 1，避免週期變成 Infinity 或反向
底色為 neutral-50 / neutral-950，淺色與深色模式下 mesh 皆清晰耐看

可及性

背景層帶 aria-hidden，純裝飾不干擾輔助科技朗讀
使用者系統開啟「減少動態效果」時，所有色點停止漂移、以靜態漸層渲染，DOM 結構不變

常見問題

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

可以。原始碼已有 "use client"，在 Server Component 頁面直接 import 即可。首次渲染與伺服器端輸出一致，掛載後才依減少動態效果設定切換成靜態版，不會出現 hydration 不一致。

會不會影響頁面效能？

色點的漂移只改 transform（x、y），不觸發版面重排；動畫由 Motion 驅動，沒有 canvas 或逐像素運算。

怎麼改顏色、速度和底色？

colors 傳入 CSS 色值陣列，speed 調整漂移倍速（非正數時回退為 1）。底色是容器上的 bg-neutral-50 dark:bg-neutral-950，可以用 className 傳入其他 bg-* 覆寫。

前景內容的點擊會被擋住嗎？

不會。漸層層設定為 pointer-events-none 並以 -z-10 放在內容下方，容器有 isolate 建立獨立的堆疊層級。

使用者開啟減少動態效果時會怎樣？

所有色點停止漂移，以靜態漸層顯示，DOM 結構不變。

Gradient Mesh

把這個效果裝進你的專案

本頁目錄