CSS 線性漸層是一種影像值，由瀏覽器根據三個要素繪製而成：定義漸層線方向的角度、一組色彩值，以及沿著該漸層線為每個顏色定位的依序百分比停駐點。完整的宣告式看起來像 linear-gradient(135deg, #1e3a8a 0%, #38bdf8 50%, #fde68a 100%)，而你在任何產生器中看到的預覽，完全反映瀏覽器實際繪製的結果。由於每個元件都受到規格的約束，只要角度、色彩值和停駐點保持不變，你就可以在產生器、樣式表和設計工具之間移動宣告而不會損壞。本文將詳細說明每個控制項，並逐步示範如何使用 CSS Gradient Generator 建立、預覽並發佈一個乾淨的三色漸層。這個工具會讓角度、顏色、停駐點與預覽保持同步，因此你複製的宣告會與你看到的內容一致。
CSS 線性漸層的結構剖析
線性漸層屬於 CSS <image> 資料型別，由 CSS Images Level 3 規範以及 MDN gradient 參考文件所定義。每次繪製元素時，瀏覽器會以程序化方式產生影像，因此漸層可以完美縮放至任何元素尺寸，無需匯出點陣圖。下列三個控制項決定了最終結果：
- 漸層角度，用來選擇漸層線穿過元素的方向。
- 色彩停駐點，每個停駐點都包含一個色彩值與沿著漸層線的一個位置。
- 這些停駐點的順序，瀏覽器會據此在顏色之間進行內插。
其他所有要素，包括停駐點數量、間距與混合行為，都源自這三個控制項。CSS Gradient Generator 正好提供一個角度、三個顏色和三個停駐點，讓宣告的結構在日後於樣式表中審查時易於檢視。每個控制項在宣告序列化之前都會經過驗證，因此預覽與複製的 CSS 共享唯一的真實來源。
角度如何對應到漸層線
CSS 角度使用度數，並遵循特定慣例：0deg 指向上方、90deg 指向右方、180deg 指向下方、270deg 指向左方。這個角度描述的是漸層行進的方向，也就是第二個停駐點朝第一個停駐點移動的方向，因此在螢幕上觀察時，度數增加代表漸層以順時針旋轉。360deg 會被視為等同於 0deg 的邊界值，介於其間的值則會產生對角線效果。
| CSS 角度 | 方向 | 常見用途 |
|---|---|---|
| 0deg | 由下往上 | 標題向上融入較淺的色帶 |
| 45deg | 由左下到右上 | 卡片上的對角強調色 |
| 90deg | 由左至右 | 側邊欄、分隔線、首頁色帶 |
| 135deg | 由左上到右下 | 用於分層的反向對角線 |
| 180deg | 由上往下 | 垂直的首頁區塊 |
| 270deg | 由右至左 | 鏡像的水平流動 |
視覺上的對角線並非固定，而是取決於漸層方塊的尺寸。漸層線會根據元素的長寬比進行解析，因此同一個 45deg 角度，在寬幅橫幅上會呈現為一道長而平緩的對角線，在高聳的直欄上則會呈現為較陡的對角線。如果在貼上宣告後對角線看起來不對，問題通常出在角度而非顏色選擇。
作為快速計算，CSS 漸層線方向是單位向量，其 x 分量等於 sin(θ)，y 分量等於 -cos(θ)，其中 y 為負是因為螢幕上的 Y 軸是向下成長。以 45deg 角度來說，會得到 x = sin(45°) ≈ 0.7071、y = -cos(45°) ≈ -0.7071，因此該線從方塊的左下角延伸到右上角，正好就是你預期的對角線。
色彩停駐點、順序規則與硬邊界
每個色彩停駐點都將一個色彩值與沿著漸層線的百分比位置配對在一起。瀏覽器會在相鄰停駐點之間內插可見的顏色，因此每個停駐點的位置會直接控制混色開始與結束的位置。以下三條規則讓輸出結果保持可預測：
- 停駐點必須依遞增的百分比順序出現。30% 的停駐點必須排在 60% 的停駐點之前。
- 允許相鄰停駐點使用相同的位置，這會產生硬邊過渡而非平滑混色。兩個位於 50% 但顏色不同的停駐點會形成一條瞬間的界線。
- 遞減的停駐點順序會被明確地拒絕並回報錯誤，而不是默默地重新排序，因為互動式設計工具不適合藏著隱性的修正機制。
百分比會被限制在 0 到 100 之間，這個範圍涵蓋了可見的漸層線範圍。CSS 本身接受超出此範圍的位置以實現進階效果，但這些控制項刻意排除在 CSS Gradient Generator 的範圍之外，以確保輸出保持易於閱讀與測試。
每個顏色都會正規化為六位數的十六進制值，例如 #1e3a8a。顏色選擇器使用原生 color 輸入，這讓選擇過程具有可預測性，驗證邏輯也會在進入宣告之前拒絕不完整或語意不清的字串。
逐步建立三色漸層
開啟 CSS Gradient Generator，並依下列順序操作各個控制項。預覽會隨著每個值的變更而更新，最終宣告會使用與預覽繪製時相同的值。
- 設定角度。輸入 0 到 360 之間的值。選擇 0 代表向上的漸層，90 代表由左至右的流動，或選擇任何中間值來建立對角線。如果不確定，可以先保留 180 這個由上往下的預設值，等顏色看起來正確後再進行調整。
- 選擇三個顏色。為漸層的起始、中間和結尾挑選六位數的十六進制值。原生 color 輸入會開啟系統選擇器；如果品牌色已經決定，你也可以直接貼上十六進制字串。
- 依遞增順序設定百分比停駐點。第一個顏色從 0% 開始，最後一個顏色設為 100%，第二個停駐點則放在兩者之間。相鄰停駐點設為相同位置是有效的，會產生硬邊界，而遞減順序的停駐點則會被拒絕。
- 複製宣告並測試對比。複製序列化後的 CSS，並貼到你的樣式表或沙盒環境中。在漸層上方放置實際的內容，確認文字和控制項在整個表面上都能清晰閱讀，而不僅僅是在取樣顏色的位置。
如果需要稍微不同的混色效果，請先調整中間的停駐點再修改顏色。移動中間的停駐點會改變最強烈過渡發生的位置，同時保持起始與結尾顏色的穩定。
對比、替代方案與 background 簡寫
漸層可能在表面的某個點通過對比檢驗，卻在另一個點失敗，特別是使用三種強烈顏色時。在將漸層視為定稿之前，請對文字或圖示出現的整個色帶進行對比檢查，而非僅針對單一取樣顏色。這個工具不會計算對比，因此責任仍落在設計審查上。
宣告使用 background 簡寫以便於複製。這個簡寫會重設元素上所有其他的 background 子屬性，因此如果同一個元件同時需要背景顏色、影像圖層、位置或大小，請謹慎地將它們整合進同一個簡寫中，或改用 background-image 來套用漸層。將單一簡寫重設與獨立的 background-color 規則混合使用，是造成細微視覺回歸的常見原因。
針對無法渲染線性漸層的較舊環境，請在漸層下方提供一個純色替代顏色；如果表面較為繁雜，也可以考慮使用疊加層或雙色變體。漸層無需點陣影像即可完美縮放，但它並非毫無設計風險。避免僅透過顏色傳達狀態資訊，並在上線前驗證主題、強制色彩模式、印刷與螢幕擷圖的呈現。
在上線前值得注意的設計風險
強烈的多色背景可能會將焦點從上方的控制項拉走。如果漸層的目的是支援介面而非主導介面，請降低中間停駐點的飽和度，或將其移近其中一個端點，讓主要表面看起來像一種顏色帶有細微的變化。如果需要更具雕塑感的視覺效果，可以透過疊加的放射狀漸層來建立網格狀的過渡；相關技巧請參考 如何使用堆疊的 CSS 放射狀圖層取代漸層網格。
瀏覽器的顏色內插預設並不具有感知均勻性，因此同一組三個顏色在不同的瀏覽器和作業系統上看起來可能會略有不同。如果品牌精準度或感知均勻性很重要，請在你專案支援的瀏覽器中實際測試輸出結果，並考慮使用色彩管理的螢幕擷圖，而非僅信任單一預覽。產生器完全在當前的分頁中執行，因此預覽與宣告共享同一個真實來源，但這個真實來源仍然受限於瀏覽器自身的內插行為。
最後，請記住漸層是影像而非顏色。當系統色彩模式、強制色彩或灰階印刷啟動時，每個瀏覽器繪製漸層的方式都會不同。一個純色替代顏色，加上至少跨兩種模式的內容審查，將能抓出產生器預覽無法發現的回歸問題。
如需更深入的探討，請參考 CSS Grid Generator API 替代方案：在瀏覽器中產生。