Gradient

CSS 漸層產生器

建立線性、放射、圓錐漸層,支援無限停止點、OKLCH 感知插值、Tailwind v4 utility 輸出。即時預覽、30+ 預設,在瀏覽器內運算。

Linear(線性)沿著一條直線以指定角度漸變(0° 朝上、90° 朝右)。Radial(放射)從中心點向外漸變 — 圓或橢圓,搭配 farthest-corner 等大小關鍵字。Conic(圓錐)圍繞中心點旋轉 — 色彩停止點像時鐘指針的角度。圓錐漸層適合圓餅圖、儀表盤、合成 color-wheel 背景。

在不相鄰的色相之間轉換時 — 例如藍 → 黃、紅 → 綠。預設的 sRGB 插值會經過混濁的灰中點;OKLCH(CSS Color Module 4 in oklch)會保持中點鮮豔,因為它在感知均勻的色彩空間中插值。兩個相近色相的兩段漸層差異不大;多停止點或寬色相範圍漸層,OKLCH 效果差異非常顯著。

色彩停止點
CSS
Tailwind v4
JSON
預設組

為實戰用 CSS 漸層而生

線性 / 放射 / 圓錐、OKLCH 平滑、Tailwind 友善 — 加上幾個讓你真正用得開心的小細節。

三種漸層類型

Linear 角度 0-360°、Radial 圓形/橢圓 + 大小 + 位置、Conic 起始角度 + 位置。輸出符合 CSS Images Module Level 4 規範。

最多 12 個色彩停止點

在任何百分比加停止點,拖滑桿微調位置,點色塊選色或貼上 HEX。輸出時自動排序。點 × 移除(最少 2 個停止點)。

OKLCH 感知插值

在預設 sRGB 與現代 in oklch 插值間切換。OKLCH 給你感知上更平滑的中間色 — hue 跳變不再出現混濁灰帶。CSS Color 4 尚未實作的瀏覽器會自動 fallback。

CSS、Tailwind v4、JSON 三種輸出

三個輸出面板即時更新:純 CSS(background-image: linear-gradient(...))、Tailwind v4 任意值 utility(bg-[linear-gradient(...)])、可丟進 Style Dictionary 或 Figma Tokens 的 JSON 設計 token。

30+ 精選預設

Sunset、Ocean、Aurora、Cyber、Royal、Neon Pink、Iris、Bullseye、Conic Wheel — 點一下載入並微調。每個預設都是真正的 production 起點,不是徒有其名。

即時預覽 + 保護隱私

預覽用原生 background-image 渲染,所看即所得 — 你的 stylesheet 將輸出完全相同的結果。每個 pixel 都在本地執行 — 打開 DevTools → Network 即可驗證沒有任何對外請求。

如何建立 CSS 漸層

從空白到可上線的 CSS、Tailwind 或 JSON,四個步驟。

  1. 1

    選擇漸層類型

    Linear 適合背景、頁首、hero 區塊。Radial 適合聚光、暈光、發光按鈕。Conic 適合圓餅圖、色相環、合成背景。用 tabs 切換 — 切換時你的色彩停止點會保留。

  2. 2

    放置色彩停止點

    點色塊開啟選色器,或直接在欄位貼上 HEX。拖滑桿設定停止點位置 0-100%。點 + Add stop 在最大空隙處插入新停止點(中點色)。最多 12 個停止點。

  3. 3

    微調幾何與插值

    Linear 設定角度(0° 朝上、90° 朝右)。Radial 選形狀、大小關鍵字、中心位置。Conic 設定起始角度。把 Color interpolation 切換成 OKLCH,獲得跨色相的感知平滑中點。

  4. 4

    複製輸出

    三個面板即時更新:CSS(background-image:...)、Tailwind v4(bg-[...])、JSON(設計 token 結構)。各面板用複製圖示,或按 Download CSS 把 gradient.css 存下,直接放進專案。

為設計師 + 開發者打造

四種常見場景 — 在這些情況下,瀏覽器內隱私優先工具比開 Figma + 另外開漸層網站快太多。

行銷頁的 hero 背景

選一個接近品牌的預設,把兩個品牌色丟進停止點,切換到 OKLCH 插值得到乾淨的中點。複製 CSS、貼進 hero 的 stylesheet。總時間:不到 2 分鐘。

品牌感的按鈕 + 卡片漸層

建好一個 3 段品牌漸層、複製成 JSON 設計 token、丟進 Style Dictionary / Figma Tokens。所有平台、所有按鈕與卡片都引用同一個漸層。一處更新,處處生效。

圖表 + 儀表板的圓錐背景

合成圓錐漸層非常適合圓餅圖視覺、進度儀表盤、「資料載入中」shimmer 狀態。選圓錐類型、設定起始角度、在正確百分比放停止點 — 0-360° 角度與百分比位置完全對應。

投影片、社群貼文、hero 圖的客製背景

建好漸層、設成你目標的比例(16:9 投影片、1:1 IG、3:1 X header),預覽截圖。或把 CSS 貼進一份單檔 HTML、用瀏覽器在你需要的精確 pixel 大小截圖。

100% 私密 — 在瀏覽器中運算

你的色彩與漸層永遠不會離開你的裝置。打開 DevTools → Network 即可驗證任何操作中沒有對外請求。

  • 漸層字串組裝、CSS / Tailwind / JSON 序列化、即時預覽全部以 JavaScript 在你的機器上執行 — 沒有伺服器渲染、沒有第三方 API。
  • 預覽用原生 CSS background-image — 所以你看到的漸層,在使用者瀏覽器中將完全相同。
  • 無需登入、不對色彩值埋點。只用一個 cookie 記錄 cookie 同意狀態,以及一個 cookie 記錄語言偏好。

相關文章

為 CSS 漸層、OKLCH 插值、設計 token 系統精選的實用文章。

常見問題

線性、放射、圓錐有什麼不同?

Linear(線性)沿著一條直線以指定角度漸變(0° 朝上、90° 朝右)。Radial(放射)從中心點向外漸變 — 圓或橢圓,搭配 farthest-corner 等大小關鍵字。Conic(圓錐)圍繞中心點旋轉 — 色彩停止點像時鐘指針的角度。圓錐漸層適合圓餅圖、儀表盤、合成 color-wheel 背景。

什麼時候要用 OKLCH 插值?

在不相鄰的色相之間轉換時 — 例如藍 → 黃、紅 → 綠。預設的 sRGB 插值會經過混濁的灰中點;OKLCH(CSS Color Module 4 in oklch)會保持中點鮮豔,因為它在感知均勻的色彩空間中插值。兩個相近色相的兩段漸層差異不大;多停止點或寬色相範圍漸層,OKLCH 效果差異非常顯著。

Tailwind v4 輸出能做什麼?

一個任意值 utility,可以直接貼進 JSX / Blade / HTML:bg-[linear-gradient(45deg,#ff6b6b_0%,#feca57_50%,#ff9ff3_100%)]。不需要修改 tailwind.config.js,任何 Tailwind 4 專案都可用。如果偏好命名色彩 token,改複製 CSS 自行轉換。

舊瀏覽器能跑嗎?

線性與放射漸層自 2014 年就普遍支援。圓錐漸層在 2021 年所有 evergreen 瀏覽器都支援。in oklch 插值關鍵字需要 Chrome 111+、Safari 16.2+、Firefox 113+。需要支援更舊瀏覽器時,使用預設 sRGB 插值即可 — 視覺差異主要出現在跨色相多停止點漸層。

資料會傳到伺服器嗎?

不會。漸層字串組裝、CSS / Tailwind / JSON 序列化、即時預覽全部以 JavaScript 在你的裝置上執行。打開 DevTools → Network 即可驗證任何操作中沒有對外請求。貼品牌色、內部 token 進來都安全 — 沒有任何位元組離開你的筆電。