漸層產生器圖表：將色標對應到 CSS 程式碼

gradient generator chart（漸層產生器色帶圖）指的是一條視覺色帶——一條在 0–100% 的軸線上、於特定位置標出色標的彩色長條——這是 CSS 漸層產生工具在即時預覽旁邊顯示的內容，讓你在複製程式碼之前，就能確切看到每個顏色所在的位置。在一個 CSS 漸層中，每一段過渡都是由色標定義的：一個顏色加上一個從 0% 到 100% 的位置，瀏覽器則會在它們之間對像素做內插。這種圖表式的色標編輯器，會把這些位置呈現在畫面上，讓你可以拖曳它們，並把最終結果印成一個單一的 background: linear-gradient(...) 或 background: radial-gradient(...) 值，讓你直接貼進樣式表中。Color Gradient Generator做的正是這件事：你選擇顏色，看著它們沿著色標軌道呈現出來，然後一鍵複製可直接上線使用的 CSS。

大多數人會用上 gradient generator chart，是在他們想設計一個背景、按鈕填色，或主視覺區塊，卻不想手動編輯百分比數值的時候。這種色帶圖，把數學運算變成了一個滑桿與一塊色塊，藉此解決這個問題。你不需要打出 linear-gradient(135deg, #ff6b6b 0%, #feca57 50%, #48dbfb 100%) 再重新整理，而是把每個色標拖到你想要的位置，然後直接從程式碼面板讀取完成的 CSS。因為這個工具會把每個位置限制在合法的 0–100% 範圍內，並自動重新排序色標，所以即使你重新調整了順序，輸出的內容在語法上仍然保持正確——而手動編輯漸層數值時，這正是最常見的出錯方式。

漸層色帶圖實際上顯示的是什麼

漸層產生器中的色帶圖，是一排沿著水平軌道排列的色塊，從左側的 0% 到右側的 100%。每一個色塊代表一個色標。在兩個相鄰色塊之間，瀏覽器會逐像素內插這些顏色，因此你在它們之間看到的那條色帶，就是實際算繪出來的漸層效果。這條看得見的軌道，正是「gradient generator chart」這個詞所描述的內容——一種能一眼檢視色標的方式，而不必去解讀一串原始的百分比字串。

這個色帶圖也會反映出漸層的類型。線性色帶圖沿著一條直線軸繪製色標，對應的是方向性的漸變。放射狀色帶圖則把同樣的位置繪製在一個中心點周圍，由瀏覽器向外漸變。兩者的顏色與位置完全相同；改變的只是混合的幾何形狀。

一眼看懂線性漸層與放射狀漸層

在線性與放射狀之間做選擇，同時會改變色帶圖的外觀，以及你得到的效果類型。下表依照真正會影響設計決策的面向，比較了兩者。

屬性	線性漸層	放射狀漸層
混合的幾何形狀	沿著你設定的角度呈一條直線	從一個中心點以圓形向外擴散
常見的角度／形狀	0deg（頂部）、90deg（右側）、180deg（底部）、135deg（對角線）	circle（預設）
典型用途	主視覺背景、區塊分隔線、按鈕填色、進度條	聚光燈效果、光暈、柔和的暗角效果、圖片疊加層
色標的行為方式	沿著角度線上 0–100% 的軸線定位	沿著從中心點算起 0–100% 的半徑定位
輸出的 CSS	linear-gradient(angle, color stop, color stop, ...)	radial-gradient(shape, color stop, color stop, ...)

如果你需要方向性的漸變——由上到下、由左到右，或任何對角線方向——請使用線性漸層。如果你需要由中心向外的混合效果——文字後方的柔和聚光燈、卡片下方的光暈、主視覺圖片周圍的暗角效果——請使用放射狀漸層。若想更深入了解在特定版面配置中該用哪一種，Linear vs Radial CSS Gradients guide說明了真實的設計情境。

用 3 個步驟建立並複製一個漸層

無論你想要的是線性還是放射狀的結果，產生一個漸層色帶圖及其對應 CSS 的流程都是一樣的。

選擇漸層類型。方向性漸變選 Linear，由中心向外的混合效果選 Radial。
設定每一個色標，並拖曳位置滑桿，讓它沿著 0–100% 的軸線移動。新增或移除色標，來控制這個漸層有幾個色帶。針對線性漸層，調整角度滑桿——0deg 指向元素的頂部，90deg 指向右側，180deg 指向底部。
檢查即時預覽，然後點選「Copy CSS」。預覽畫面會即時顯示確切的算繪結果，程式碼面板則會印出完整的宣告，例如 background: linear-gradient(135deg, #ff6b6b 0%, #feca57 50%, #48dbfb 100%);，你可以把它逐字貼進你的樣式表中。

就是這整個循環：輸入、編輯、複製。因為每一個步驟都在你的瀏覽器中執行，而這個工具會在你拖曳時限制位置範圍並重新排序色標，你不可能不小心產生無效的 CSS——即使你把一個色標拖過了另一個，這個工具也會在印出結果之前，依位置重新排列它們。

漸層色帶圖在介面設計中的定位

漸層並不是裝飾性的事後補充。它們出現在使用者真正會看到、會觸碰的介面上，而這種色帶圖是不必手動編輯百分比、就能快速調出正確效果的方法。下表把常見的介面元素，對應到通常適用的漸層類型與色標樣式。

介面元素漸層類型典型的色標樣式主視覺或區塊背景線性、對角線（通常是 135deg）兩個色標分別在 0% 與 100%，做出乾淨的暈染效果；或三個色標，中間加上一個重點色主要按鈕填色線性、由上到下（180deg）或 45deg兩個色相相近的色標，營造柔和的斜角效果提升可讀性的圖片疊加層線性，通常由下到上0% 處透明，100% 處為深色，讓白色文字保持清晰可讀文字或卡片後方的柔和聚光燈放射狀，circle0% 處為中心色，100% 處透明或近乎透明進度條或量表列線性、由左到右（90deg）填色區域中設兩到三個色標，營造層次感徽章或藥丸形按鈕線性、45deg 或 135deg兩個飽和度相近的色標

以上每一項都只是一個小小的 CSS 改動——一個 background 值——但正是這種色帶圖，讓你能以這些介面所需要的精確度，放置每一個色標。

色標如何創造出多色帶漸層

兩個色標會產生一個從顏色 A 到顏色 B 的乾淨漸變。加入第三個色標，能讓你在軸線上的特定位置保持或轉換某個顏色，這會產生一個多色帶的混合效果，而不只是單一的過渡。一個位於 50%、與兩端顏色都不相符的色標，會形成一個看得見的色帶；一個能與相鄰顏色平滑內插的色標，則會成為彎曲過渡曲線的控制點。實務上，三個色標對大多數主視覺背景與按鈕填色來說已經足夠，四個色標則幾乎能涵蓋其餘所有情況。超過四個色標，通常代表這個設計想要的是多個堆疊的漸層，而不是單一、更長的漸層。

當你在色帶圖上拖曳色標時，這個工具會把每個位置限制在合法的 0–100% 範圍內，並依位置重新排序。這正是無論你以什麼順序編輯，印出來的 CSS 在語法上都能保持有效的原因。這對無障礙性也很重要：在中間點設一個純白或純黑的色標，是在疊加層中強制拉出對比度最簡單的方法，不過對於任何文字／背景組合，你仍然應該在上線前用

Color Contrast Checker驗證對比比例。

為什麼純 CSS 漸層在正式環境中經得起考驗

從色帶圖產生出來的漸層，就只是一個 CSS 屬性——沒有圖片檔案、沒有素材上傳、沒有建置步驟。linear-gradient() 與 radial-gradient() 都是標準 CSS，因此在所有現行瀏覽器中都能運作，不需要廠商前綴、外部函式庫，或後備方案。因為這個輸出結果是以數學方式產生的，它能在任何元素尺寸或螢幕密度下都清晰縮放，這是點陣圖匯出檔比不上的。這個單一的 CSS 值，也不會增加任何網路請求，也不需要任何一位元組的圖片資料；瀏覽器會在每一個畫格由 GPU 繪製這個漸層。

使用 Color Gradient Generator 時，一切都在瀏覽器中於本機執行：你設計的任何內容都不會被上傳到伺服器。當結果看起來正確時，只要點一下就能把 CSS 複製到你的剪貼簿，接著就能直接貼進樣式表、元件檔案，或設計權杖（design-token）系統中。如果你想探索一些自己不會手動想到的色彩組合，可以按下「Randomize」重新洗牌色標，找到喜歡的組合後再進行編輯並複製。