CSS 漸層產生器

CSS 漸層是什麼，為什麼手寫容易寫壞

linear-gradient()、radial-gradient()、conic-gradient() 產生的不是顏色，而是一張由瀏覽器即時畫出來的圖片。 所以它要放進 background 或 background-image，不是 background-color。寫進 background-color 不會報錯，只會整條規則被忽略， 這是手寫漸層第一個踩到的坑。

第二個坑是角度。CSS 的 linear-gradient 以 0deg 指向正上方、順時針增加， 跟數學課的極座標方向相反，也不一定跟你的設計工具同一個基準。 與其在腦中換算，不如拉上面的滑桿看預覽，角度數字會同步印在標籤右邊。

第三個坑是顏色站的位置。某一站的百分比比前一站小的時候，瀏覽器不會報錯， 而是把它拉齊到前一站的位置，於是你得到一條硬邊界而不是過渡。 本頁在輸出前會先照位置由小到大排序，預覽與複製出來的那一行永遠一致。

三種漸層類型

• Linear（線性）：從一端到另一端的直線過渡。最常用、Hero banner、卡片背景。 角度 0° = 由下到上、90° = 由左到右、180° = 由上到下。
• Radial（放射）：從中心點向外擴散。光暈、聚焦效果、按鈕高光。
• Conic（圓錐）：以中心點為軸，顏色繞圈旋轉。圓餅圖、彩虹、計時器圓環。

選 Radial 時角度滑桿會收起來，因為本頁的放射漸層固定畫成正圓（circle），沒有方向可以調。 選 Conic 時，滑桿的意思從「方向」變成「起始角度」，也就是顏色從哪裡開始繞。

從預設庫挑一個，再調成你要的

1. 先在預設庫裡找最接近的一組。粉嫩、霓虹、夕陽、海洋、森林、晨曦六個色系， 點一下就整組套進預覽，比從兩個純色開始調快得多。
2. 需要換形狀就改「漸層類型」。線性適合大面積背景，放射適合做光暈， 圓錐適合環狀的東西。
3. 拉「方向角度」的滑桿。想要斜的就往 45° 或 135° 走，正橫正直看起來會比較呆板。
4. 在下面的顏色站列表改顏色：左邊的色票可以直接點開系統調色盤， 旁邊的欄位收六位數的 hex（例如 #c1170c），再旁邊的數字是它在漸層上的位置百分比。
5. 要更細緻的過渡就按「新增」多加一站，不需要的按右邊的垃圾桶移除。 最少要留兩站，所以只剩兩站時移除鈕會變成不可按。
6. 預覽是即時的，最上面那一大塊色就是最終結果。滿意了再往下複製。

調一個不留接縫的圓錐漸層

1. 把「漸層類型」切到 Conic（圓錐）。這時滑桿標籤會變成「起始角度」。
2. 把第一站設在 0%、最後一站設在 100%，中間依你要的比例插站。圓錐漸層的百分比就是繞一圈的比例， 25% 正好是四分之一圈。
3. 把第一站與最後一站設成同一個顏色，繞完一圈接回起點時才不會出現一條明顯的接縫。 彩虹色環與載入動畫的環都是這樣收尾的。
4. 用「起始角度」把接縫轉到不礙眼的位置，例如轉到被圖示蓋住的那一側。
5. 要做成環狀而不是實心圓餅，複製出來後在同一個元素上加 border-radius: 50% 與一個遮住中心的內圈。

設計建議

• 顏色站不要超過 5 個：太多會雜亂，視覺重心散
• 45° / 135°：最好看的線性方向，避免水平垂直死板
• 同色系微差：subtle gradient（差 10-20 度色相）最現代
• 避免彩虹：除非真要鮮豔風
• 注意文字對比：漸層背景上的文字要選對比夠的色

把漸層帶走：CSS、Tailwind class 與分享連結

怎麼用 CSS

複製產出的程式碼貼進 CSS：

.hero {
  background: linear-gradient(135deg, #c1170c 0%, #fbe3dd 100%);
  /* 或：background-image: linear-gradient(...) */
}

Tailwind 使用者：可以直接寫 bg-[linear-gradient(135deg,_#c1170c_0%,_#fbe3dd_100%)] （注意空格要改底線）。

三個按鈕各帶走什麼

• 複製 CSS：完整的一行 background: ...;，每一個顏色站都在裡面。要保留全部的站就用這一份。
• 複製 Tailwind：預設是 v4 寫法，線性輸出 bg-linear-135 這種照角度寫的 class，放射是 bg-radial-[circle]，圓錐是 bg-conic-45，再接 from-[...]、via-[...]、to-[...]。專案還在 v3 就切到 v3，線性改成 bg-gradient-to-* 八個方向取最接近的那個，放射與圓錐輸出中括號的完整函式。顏色站超過三個時 Tailwind 的三段裝不下，兩個版本都改輸出 bg-[...]，每一站都保留。
• 分享連結：把目前的類型、角度、插值方式與所有顏色站寫進網址的查詢字串再複製起來。 貼到聊天室或工單裡，對方打開就是同一組漸層，不必再描述一次。

不同框架與不同地方的寫法差異

• Tailwind 的版本：v4 把線性漸層改名成 bg-linear-*，另外多了 bg-radial 與 bg-conic，舊的 bg-gradient-to-* 還留著當相容名稱。v4 的漸層不寫修飾時在 oklab 內插，所以插值選「不指定」時本頁會在 class 後面加 /srgb，顏色才跟預覽一樣。不確定專案版本就改用「複製 CSS」那一份。
• 插值色彩空間：CSS 預設在 sRGB 裡內插，紅配藍、藍配黃這種差很遠的兩色，中段常常發灰。選 oklab 中段會亮一些、乾淨一些；選 oklch 會沿色相環繞過去，中段最飽和。輸出會寫成 linear-gradient(135deg in oklch, ...)。Chrome 111、Firefox 127、Safari 16.2 起才認得，更舊的瀏覽器會把整行丟掉，要照顧就在前面多寫一行不帶插值的漸層當備援。
• CSS-in-JS 與樣式物件：React 的 style 屬性要的是 { background: "linear-gradient(...)" }，把複製出來那行的屬性名與分號去掉、值用引號包起來即可。
• 設計工具：設計稿標的角度不一定跟 CSS 同一個基準，直接照抄數字常常會轉錯方向。 以上面的預覽為準，或把 0° 朝上、順時針這件事先對齊再換算。
• 電子報與 HTML 信件：各家郵件用戶端對 CSS 的支援差很多，漸層是最容易失效的一類。 寄出去之前務必實測，或退回去用一張背景圖，並且保留一個純色的 fallback。
• 很舊的瀏覽器：conic-gradient 是三種裡面最晚普及的一個。要照顧舊環境時，先在 background 前面寫一行純色當 fallback， 實際支援情形以 MDN 的相容性表為準。
• 深色模式：同一組漸層在深色底上常常會顯得過亮。慣例是為深色模式另外準備一組， 把亮度往下壓，而不是直接沿用。本頁可以調好兩組各自複製一次。

這頁做不到的事，與可讀性

• 放射漸層只畫正圓：本頁固定輸出 radial-gradient(circle, ...)。 要橢圓、 要指定圓心位置、要 closest-side 這類尺寸關鍵字，請複製出來之後自己在 CSS 裡補。
• 顏色只收六位數 hex：顏色站不支援透明度，也不支援 rgba()、oklch() 這些寫法。 需要半透明的漸層遮罩，複製出來後把 #ffffff 換成 rgba(255,255,255,0) 之類的值。
• 不會解析既有的 CSS：這頁只往外產生，沒辦法把你手上那一行漸層貼進來反推成控制項。
• 對比要兩端都檢查：漸層背景上的文字，最亮那一端與最暗那一端都要過。 拿兩端的顏色去WCAG 對比檢查跑一次，只驗其中一端等於沒驗。
• 不要只用顏色傳達資訊：圓錐漸層做成的圖表或進度環，對色覺障礙的人可能分不出段落， 請另外補上文字標籤或圖樣。
• 大面積的漸層會有色帶：跨度很大又很平緩的漸層，在一般螢幕上容易出現一圈一圈的階梯。 多加一兩個中間站、或縮小兩端的色差通常就會改善。

另外提醒，漸層是背景，不是內容。它不會被螢幕閱讀器唸出來， 所以不要把任何必要的訊息只畫在漸層裡。