漸層是由色彩停駐點所定義 — 每一個停駐點都是一個顏色搭配從 0% 到 100% 的位置 — 而瀏覽器會在它們之間進行像素的內插計算。在這個情境下，「色調」是你挑選的個別顏色：接近黑色的深藍、溫暖的琥珀色、鮮豔的洋紅色。「變化」則是你在畫布上安排這些色調的方式 — 線性漸層所選擇的角度、加入的停駐點數量，以及每個停駐點在 0–100% 軸上的位置。兩個停駐點產生乾淨的漸淡;加入第三或第四個停駐點，則會把漸淡轉變成多色帶的混色，可以有固定色塊、銳利的中間點，或是推向一側再拉回的色彩。最簡單的探索方式，不用手寫 CSS，就是使用 Color Gradient Generator，這是一個視覺化工具，讓你選擇漸層類型、拖曳停駐點及其位置、調整角度，並即時查看結果更新。當設計看起來滿意時，只要一個點擊就能把可直接貼上的 CSS 背景宣告複製到剪貼簿。
在 CSS 漸層中色調與變化的意義
每一個 CSS 漸層值，都只是線性漸層 (...) 或放射狀漸層 (...) 函式中的一串色彩停駐點。每個停駐點包含兩個部分:一個顏色，以及以百分比表示、從 0% 到 100% 的位置。瀏覽器會從第一個停駐點走到最後一個，並平滑地混合其中的每個像素。當你只在 0% 和 100% 放兩個停駐點時，結果就是簡單的雙色調漸淡。一旦你在例如 40% 的位置加上第三個停駐點並指定其顏色，該顏色就會被固定在 40%，內插過程會分成兩段 — 這就是在基本色調混合之上，最簡單的「變化」。
變化也來自漸層類型以及你在其上設定的幾何形狀:
- 線性漸層角度:0deg 將混色指向盒子的頂部，90deg 將其推向右側，180deg 則使其落到底部。將角度改變 30 或 45 度，是最常見的色調變化之一。
- 拖曳停駐點位置:把停駐點從 50% 移到 20%，會壓縮該停駐點之前的混色區段，並拉長其後的區段，這就是營造出「色彩爆發」偏向某一側視覺重量的方式。
- 編輯停駐點顏色:把其中一個顏色換成接近單色的色調，會形成色調式的變化;換成互補或對比色，則會產生高能量的變化。
- 放射狀的形狀與原點:在放射狀漸層中，同樣的兩或三個顏色可以從一個圓心向外輻射，產生與線性掃掠截然不同的變化。
由於產生器會自動將每個停駐點限制在 0–100% 範圍內，並依位置重新排序，無論你在設計時如何重新排列，它輸出的 CSS 都能保持語法正確。
逐步建立漸層色調與變化
- 選擇漸層類型。選擇線性 (Linear)可獲得可調整角度的方向性漸淡，或選擇放射狀 (Radial)以獲得由中心向外混合的效果，適用於聚光燈、光暈與柔和的暈邊。你選擇的類型就是第一個設定的「變化」。
- 設定每個顏色並拖曳其位置。編輯每個停駐點的顏色，然後拖曳滑桿將停駐點沿著 0–100% 軸移動。加入第三或第四個停駐點以在特定位置固定一個顏色，或移除停駐點以簡化混色。在線性漸層中，也可以調整角度滑桿 — 0deg 指向頂部，90deg 橫向向右，中間的任何數值都會產生對角線的混色。
- 即時預覽並複製 CSS。在操作過程中觀察內嵌預覽的更新。當看起來滿意時，點擊複製 CSS (Copy CSS)，即可取得完整的 background: linear-gradient(...) 或 background: radial-gradient(...) 宣告，並直接貼到你的樣式表中。
如果你不想手動挑選，想探索新的組合，「隨機產生」動作會為你產生一組新的顏色、位置和角度，作為起點。一切都在你的瀏覽器中本地執行，因此你設計的任何內容都不會上傳到伺服器。
線性 vs 放射狀:哪一種承載更多變化
兩種漸層類型都支援相同的色調式變化 — 多重停駐點混色、中間色固定、銳利轉場以及接近單色的調色盤 — 因此它們之間的選擇其實是關於方向。當你希望漸層呈現為橫越表面的掃掠時，使用線性;當你希望它呈現為中心發光或柔和衰減時，則使用放射狀。
| 面向 | 線性漸層 | 放射狀漸層 |
|---|---|---|
| 方向控制 | 可調整角度 | 從中心點向外 |
| 最適合 | 背景、按鈕、卡片、分隔線 | 聚光燈、光暈、柔和暈邊 |
| 變化旋鈕 | 角度滑桿加上停駐點位置 | 形狀 (圓形) 加上停駐點位置 |
| 固定中間停駐點的效果 | 在色帶上形成色彩高原 | 在兩色之間形成圓環或光暈 |
漸層色調與變化在真實介面中的應用
多重停駐點的線性與放射狀漸層在現代介面設計中無處不在，而其中大多數都是同一小撮模式的不同變化:
- 主視覺與區塊背景:由上而下的雙停駐點線性漸淡，給予乾淨、平靜的背景;三個停駐點並在中段固定一個重點色的混色，則能給出更具品牌感、充滿活力的背景。
- 按鈕與卡片填色:以 135° 角度進行的雙停駐點線性漸層，是經典的「凸起按鈕」外觀;將第二個停駐點換成更深的色調，就能產生按下或懸停的狀態。
- 徽章與標籤:在小面積上的放射狀漸層，看起來像柔和的高光，讓扁平的藥丸形狀呈現立體感。
- 進度條:具有較亮前緣的水平線性漸層，可傳達動態與完成感。
- 懸停狀態:在 :hover 時換掉漸層中的一個色調，是你可以實作的、最便宜的視覺回饋效果之一。
- 圖片遮罩:由上而下或由下而上的線性漸層 (通常是從透明到接近黑色的色調) 可讓白色文字在照片內容上仍保持可讀性。
- 裝飾性分隔線:低對比的雙停駐點線性漸層，是常見用來取代硬邊分隔線的手法。
為什麼產生 CSS 而非匯出圖片
漸層產生器的輸出是純粹的 CSS — 一個單獨的背景值 — 而不是經過點陣化的 PNG 或 JPEG。這個選擇很重要，有以下四個原因:
- 任何尺寸都清晰銳利。瀏覽器會即時內插漸層，這代表它可以乾淨地縮放至任何元素尺寸或解析度。在 2x 或 3x 螢幕上也絕不會出現像素化。
- 零網路請求。一個 CSS 屬性，沒有圖片檔案，也不需要另外託管或快取的資產。
- 不需廠商前綴或函式庫。linear-gradient() 與 radial-gradient() 都是標準 CSS，在所有現代瀏覽器中皆可直接使用，無需前綴。
- 可原地編輯。由於漸層存在於你的樣式表中，你只需在一行 CSS 中更改色調或角度，不必重新匯出圖片、重新上傳，也不必清除快取。
對色調與變化選擇的快速檢查
當你完成漸層的草稿後，三個快速的檢查能在你發佈 CSS 前抓到大多數常見的問題:
- 首尾停駐點的覆蓋。請確認在 0% 附近有一個停駐點，在 100% 附近也有另一個。如果兩端都落在中間，瀏覽器會把外側停駐點的顏色平展延伸至邊緣，結果就會變成兩條實心色帶加上一段漸淡 — 這通常不是你想要的。
- 兩個停駐點位於相同位置。把兩個停駐點拖到相同位置，會產生硬邊的顏色斷層而非平滑混色;這在某些條紋式重點色上偶爾有用，但很容易不小心做出來。
- 中間停駐點的位置。固定的中央色彩效果最好的情況，是其位置明顯偏離中心 (例如 35% 或 65%)，而非剛好 50%，這樣兩側的混色長度才會有明顯差異。
在產生器中，每個停駐點的位置都被限制在 0–100% 範圍內，且清單會依位置自動排序，因此即使你在設計時把停駐點拖到雜亂的順序，複製出來的 CSS 仍始終語法正確。
綜合整理
處理漸層色調與變化最乾淨的工作流程是:先選擇類型 (線性或放射狀)，在 0% 和 100% 鎖定兩個基準色調，然後只有在有明確視覺目標時才加入第三或第四個停駐點 — 例如在 40% 處固定的重點色、在 85% 處接近單色的尾段、或在 25% 處的互補跳色。每加入一個停駐點，就多一個變化旋鈕;每移除一個停駐點，就是一次簡化。如果你想看同樣的兩種顏色在放射狀與線性混色下的差異，或是把停駐點從 50% 移到 30% 會如何改變色彩的比重，產生器中的即時預覽會在每次拖曳時更新。當視覺效果符合你心中的構想時，複製 CSS，貼到樣式表中，然後繼續下一步。
若想更深入了解色彩停駐點如何轉化為最終的 CSS 值，請參閱 CSS 漸層顏色:從停駐點到可上線的程式碼。
如果你正在權衡各種選項，在 Windows 上將十六進位轉為 RGB:在瀏覽器中轉換 CSS 十六進位色碼 對此有詳細說明。