大多數漸層錯誤可歸納為三類：選錯漸層類型、將停色點設在錯誤位置、以及使用與版面配置對抗的角度 —— 這三種錯誤都可以避免，只要你在上線前先建立、預覽並複製。CSS 漸層看起來簡單得令人困惑，因為該屬性很短：一個方向、兩個顏色、一個分號，就這樣。實際上，只有當類型符合用途、停色點描繪出刻意的形狀、且角度指向視覺預期方向時，漸層才會如你想像般運作。Color Gradient Generator 會為你處理繁瑣工作 —— 你選擇線性或放射狀、拖曳每個停色點的顏色和百分比、用滑桿設定角度，然後一鍵讀回精確的背景宣告。以下所有內容都假設採用這種工作流程：建立、預覽、複製。這些技巧是讓預覽符合實際上線效果的規則；而這些錯誤則是 CSS 在樣式表中正式生效後才會浮現的 bug。
線性 vs 放射狀：先選對類型
第一個決定不是顏色 —— 而是混色的形狀。線性漸層沿著某個角度以直線延伸，因此自然適合用於橫幅、主視覺區塊、按鈕、卡片和進度條等任何方向性的漸變看起來像動態或層級的地方。放射狀漸層則從中心點向外以圓形方式混色，因此自然適合用於聚光燈效果、大頭照後方的柔和光暈、暗角效果，以及暗示光源的按鈕亮點。選錯類型的結果會在技術上看似正確，但在視覺上卻是錯的：聚光燈效果若由上往下漸淡會看起來像平面面板；而由一點向外放射的方向性漸變則會看起來像一抹汙跡。
下表摘要說明實際差異，讓你在開始拖曳停色點之前就能輕鬆做出選擇。
| 屬性 | 線性漸層 | 放射狀漸層 |
|---|---|---|
| 混色方向 | 沿著固定角度的直線 | 從中心點向外以圓形擴散 |
| CSS 函式 | linear-gradient(angle, ...) | radial-gradient(circle, ...) |
| 最適合 | 橫幅、按鈕、卡片、進度條、區塊背景 | 聚光燈、光暈、暗角效果、大頭照光環、按鈕亮點 |
| 旋轉控制 | 可以，使用可調角度滑桿 | 不行，固定的圓形 |
| 常見錯誤 | 選了與版面網格對抗的角度 | 在需要方向性漸變時將其用作頁面背景 |
一旦類型確定後，下一個決定就是停色點和角度 —— 而大部分實際的錯誤都藏在這裡。
打造可用於生產環境的漸層
把 Color Gradient Generator 當作視覺化草稿區使用：你在畫面上做的每個變更會同時列印到程式碼面板中，所以當預覽看起來正確時，CSS 已經是可以上線的狀態了。確切的順序不如節奏重要 —— 類型、停色點、角度、複製。
- 開啟產生器並選擇漸層類型。針對方向性漸變（由上往下、由左往右或任何對角線方向）選擇 線性；針對由中心向外混色選擇放射狀。
- 設定第一個顏色停色點。選擇起始顏色並確認其位置在 0%，這樣漸層就會從元素的起始處精確開始。
- 設定最後一個顏色停色點。選擇結束顏色並將其設在 100%，這樣漸層會在元素的結束處精確結束。
- 調整線性漸層的角度。使用滑桿旋轉混色 —— 0deg 指向上方，90deg 指向右方，180deg 指向下方，270deg 指向左方。像 45deg 和 135deg 這類對角線方向最常用於主視覺區塊。
- 視需要新增或移除停色點。在 50% 處的第二個停色點可在中間固定一個顏色，將雙色漸變轉為三層混色。更多停色點能產生更銳利的過渡與強調色帶。
- 自由重新排序停色點。系統會自動依位置重新排序，因此拖曳時不必擔心順序問題。
- 觀察即時預覽。預覽窗格會呈現精確的 CSS 值，所見即所上。
- 點擊 複製 CSS 並將宣告以 background 值的形式貼進你的樣式表。輸出為純 CSS，不含前綴、圖片，也不需建置步驟。
整個循環 —— 類型、停色點、預覽、複製 —— 都在你的瀏覽器中本地執行。你設計的任何內容都不會被上傳，因此可以隨心所欲地反覆嘗試，完全不必接觸伺服器。
破壞混色的顏色停色點配置錯誤
停色點是漸層中真正控制其特性的部分，同時也是大多數 bug 的起點。停色點就是一個顏色加上從 0% 到 100% 的位置，瀏覽器會在相鄰的停色點之間平滑地內插像素。停色點的數量與位置決定了你的漸層看起來是乾淨的漸變、銳利的色帶，還是多色調的轉換。
第一個常見錯誤是忘記兩個停色點是最低要求。只有一個停色點的 linear-gradient 不是漸層，而是純色。如果預覽看起來是平的，你幾乎肯定需要在 100% 處加上第二個停色點。
第二個錯誤是將停色點放在相同的位置。兩個顏色都在 50% 並不會產生平滑的色帶；它會產生一條硬線，瀏覽器會將其呈現為銳利的邊緣，這很少符合設計意圖。將它們至少分開幾個百分比，以獲得乾淨的過渡。
第三個錯誤是中間過度擁擠。在 40% 到 60% 之間塞入六個停色點，渲染結果幾乎與在 40% 和 60% 各放一個停色點相同，因為瀏覽器沒有足夠空間為每次過渡進行內插。將停色點分散到完整的 0–100% 範圍，讓每次過渡都有喘息的空間。
第四個錯誤是假設停色點順序很重要。其實並不重要，只要位置是有效的即可。產生器會自動依位置重新排序停色點，並將每個值限制在 0–100% 範圍內，因此無論你如何拖曳，列印出的 CSS 在語法上永遠是正確的。如果你想要一個自訂色板作為起點，Color Palette Generator 可讓你一鍵取得互補色、類似色和三分色組合。
角度、對比與可讀性技巧
角度是漸層設計中最被低估的槓桿，同時也是最容易搞錯的部分。數學很簡單：0deg 指向上方，90deg 指向右方，180deg 指向下方，270deg 指向左方。若要斜向，可以從任何基本方向加減 45deg。一個簡單的實例能讓這點更具體：若要讓主視覺從左上角淡出到右下角，你可以從 0deg（上方）開始，然後順時針旋轉 135deg，這樣就會得到角度 135deg。若要反轉同一個漸層，讓較亮的顏色位於左上角，則切換到 315deg，也就是 360 − 45。
| 角度 | 混色執行方向 | 常見用途 |
|---|---|---|
| 0deg | 由下往上 | 來自下方的光源 |
| 45deg | 由左下到右上 | 扁平版面中的細微亮點 |
| 90deg | 由左到右 | 按鈕、進度條、側邊漸變 |
| 135deg | 由左上到右下 | 主視覺背景、對角線橫幅 |
| 180deg | 由上往下 | 頁面背景、區塊分隔線 |
| 270deg | 由右到左 | 反向版面、由右至左設計 |
角度設定好之後，下一個技巧就是對比。漸層單獨看起來很棒，但當文字疊在上面時往往就失敗了，因為漸層中較亮的色帶可能會讓文字的對比低於 WCAG 4.5:1 的閾值。可靠的解決方法是使用 Color Contrast Checker 搭配你實際要使用的文字顏色來檢查最終的漸層，然後加深或調亮停色點，直到比率通過為止。在接近 100% 處加入一個半透明的深色停色點 —— 例如 rgba(0, 0, 0, 0.4) —— 是確保整個元素可讀性的快速方法，而且無需重新設計漸層。
最後，選擇具有相同色調的停色點。從青綠到珊瑚色的漸層看起來很刻意；從青綠到隨機橙色的漸層則看起來很突兀。從同一個色系中挑選的兩種顏色 —— 或從產生的互補色色板中挑選 —— 幾乎總是比隨機挑選的兩種顏色看起來更有設計感。
瀏覽器相容性與 CSS 輸出最佳實務
從產生器取得的 CSS 是標準的背景值，在所有當代瀏覽器中都能運作，無需前綴。linear-gradient() 和 radial-gradient() 都是 CSS Images Level 3 規範的一部分，多年來在 Chrome、Firefox、Safari 和 Edge 都已列入基準支援。在現代程式碼中不需要 -webkit-、-moz- 或 -o- 的變體，也無需在任何你實際會目標的瀏覽器上提供圖片型後備方案。
話雖如此，輸出的可攜性取決於你如何使用它。兩個習慣能避免最常見的上線 bug。第一，將宣告貼成 background，而不是獨立的屬性。產生器會輸出 background: linear-gradient(...);，因為這是該值預期的消費方式。將其包在 background-image 中雖然在所有瀏覽器中也能運作，但 background 讓你能在同一行中堆疊後備顏色，這在元素在漸層解析完成前先行渲染時非常有用。第二，不要手動編輯列印出的 CSS 來整理格式。產生器會自動將停色點位置限制在 0–100% 範圍內並依位置重新排序；任何手動重新排序或四捨五入的值都可能讓漸層位移一兩個像素，反而抹煞了預覽所呈現的效果。
因為所有處理都在瀏覽器本地執行，你也可以使用「隨機化」控制項來探索自己不會挑選的組合，然後保留或捨棄每個結果。什麼都不會離開頁面，CSS 也永遠是複製就緒的狀態。
複製 CSS 前的快速檢查清單
在按下「複製 CSS」之前，請逐條檢視這份五項清單。它能揪出那些在隨意預覽中存活、卻在生產環境中現形的錯誤。
- 類型符合用途：線性用於橫幅和按鈕，放射狀用於聚光燈和光暈。
- 第一個停色點在 0%，最後一個停色點在 100%，讓漸層能由元素邊緣到邊緣填滿。
- 停色點位置是分散而非集中，讓每次過渡都有內插的空間。
- 角度指向視覺預期方向（基本方向 0deg、90deg、180deg、270deg；對角線 45deg／135deg／225deg／315deg）。
- 文字對比通過針對漸層最亮與最暗色帶的 WCAG 檢查。
當每一項都打勾時，你複製的 CSS 就是實際上線的 CSS —— 相同方向、相同停色點、相同混色、相同預覽。這正是以視覺化方式建立漸層，而非手動編寫函式的全部意義所在。
若想深入了解，請參閱 How to Use a Color Gradient Generator: Pick, Preview, Copy。
若想深入了解，請參閱 Common Mistakes When You Use a Font Pairing Generator。