什麼是漸層產生器？
視覺化 CSS 漸層建構工具，支援線性、放射狀和錐形漸層，可新增無限色標。即時調整角度、位置和顏色，一鍵複製 CSS 程式碼。
在線性、徑向和錐形漸層之間選擇，把角度設在 0° 到 360° 之間，按需加入任意多個色標，並為每個色標單獨設定透明度以做透明疊加。可以從日落、Instagram、海洋等精選預設入手，再細調顏色。徑向漸層可選擇圓形或橢圓形狀以及範圍關鍵字，並把混色切換到 OKLab 或 OKLCH 取得更滑順的現代插值，或套用緩動曲線。打開「動畫」即可得到一段可直接貼上的 @keyframes 迴圈，做成會動的背景。輸出是純 CSS，可直接放進樣式表、Tailwind 設定或設計工具。
使用方法
- 步驟一 — 選擇漸層類型（線性、放射狀或錐形），使用角度滑桿或預設按鈕設定方向或角度。
- 步驟二 — 點擊漸層列新增色標，透過拖曳或輸入精確數值來調整每個色標的顏色和位置。
- 步驟三 — 即時預覽漸層效果，然後將產生的 CSS 程式碼複製到剪貼簿，或下載為 CSS 檔案。
何時使用
- 做網站首屏、按鈕、卡片背景,不用開 Photoshop。
- 把品牌色統一套用到網頁、郵件和簡報上。
- 交給工程師前,先把 CSS 效果試跑一遍。
結果
假設你想做一個日落主題的首屏背景。選擇 135° 線性漸層，0% 設為橘色、50% 設為玫紅、100% 設為紫色，然後把 CSS 貼入樣式表就行了。
常見問題
- 線性、放射、圓錐漸層差別在哪?
- 線性沿一條直線依設定角度漸變顏色。放射從中心向外擴散,像太陽光。圓錐繞一個圓心掃一圈,常用來做圓餅圖或色環。
- 色標最多可以加幾個?
- 沒有硬性上限。多數設計兩到四個色標就夠了。超過五、六個之後,顏色互相融合,反而顯得髒,失去原本想要的清晰過渡。
- 漸層在深色背景上為什麼會有色帶?
- 相鄰顏色亮度太接近就會出現色帶。可以拉大色標對比、把色彩插值切到 OKLCH 或 OKLab(感知更均勻),或在 CSS 中疊一層細微雜訊。
- 產出的漸層能在 Figma 或 Sketch 用嗎?
- CSS 本身不能直接貼進去,但色值和百分比位置是一對一對應的。把每個色標的 hex 值和位置抄到設計工具的漸層編輯器即可。
- 角度參數到底是做什麼用的?
- 線性漸層中,0° 朝上,順時針旋轉——90° 由左到右,180° 由上到下。圓錐漸層中,角度決定顏色環從哪個位置開始掃。