CSS 漸層產生器是一個工具，能將您選擇的色彩、停駐點位置與方向設定，轉換成任何現代瀏覽器都能算繪的單一有效 CSS background 屬性。您不必手寫語法、猜測角度，或煩惱百分比超出範圍，而是以視覺方式操作：挑選色彩、拖曳停駐點、設定角度，工具就會輸出可直接複製的程式碼。在底層運作上，漸層其實只是 CSS 的一行程式碼——可以是 linear-gradient()，沿著某個角度混合色彩；或是 radial-gradient()，從中心點向外混合。漸層中的每個色彩都是一個停駐點，並搭配一個介於 0% 到 100% 之間的位置。瀏覽器會在停駐點之間以平滑插值的方式填滿像素。一個設計良好的產生器會自動處理那些單調但重要的細節：依位置排序停駐點、將每個位置限制在有效的 0–100% 範圍內，無論您如何編輯，都會產生語法正確的 CSS。輸出內容是純文字，您可以直接貼到樣式表裡，不需要任何圖片、外部函式庫或建置步驟——而且它能完美縮放至任何元素尺寸，品質毫不減損。
CSS 漸層產生器實際上在做什麼
從核心來看，漸層產生器是兩種語言之間的翻譯器：設計師做出的視覺決策（哪個色彩放在哪裡、混合應該往哪個方向跑）與瀏覽器預期的宣告式語法（用 CSS 寫成的單一 background 值）。這種翻譯聽起來很簡單，但有三個小細節常常讓人卡關：
- 角度慣例。 CSS 的 linear-gradient() 角度是以 0deg 指向上方、90deg 指向右邊、180deg 指向下方、270deg 指向左邊來測量。心智旋轉很重要；以 0deg 撰寫的「水平」漸層實際上是指向正上方。
- 停駐點位置。 每個停駐點都需要一個介於 0% 到 100% 之間的位置。超出範圍的值會產生無效的 CSS，而兩個相同位置的停駐點會合併成一條硬邊，而非平滑漸變。
- 停駐點順序。 停駐點在輸出時應依位置由小到大排列。如果您透過拖曳以視覺方式重新排序，產生器在輸出時必須重新排序，否則 CSS 雖然仍可運作，但讀起來會很混亂。
一個專為此用途打造的色彩漸層產生器能幫您處理這三個顧慮。您可以任意順序拖曳停駐點、設定角度、自由新增或移除停駐點，工具會輸出一行任何瀏覽器都能算繪、可直接貼上的 CSS。
線性 vs 放射：兩種漸層類型完整解說
CSS 內建恰好兩種漸層函式，幾乎能涵蓋所有實際的設計需求。了解它們之間的差異，是為特定工作挑選正確類型的最快方式。
| 特性 | linear-gradient() | radial-gradient() |
|---|---|---|
| 混合方向 | 沿著您設定的角度呈一直線（0deg = 上、90deg = 右、180deg = 下） | 從中心點向外擴散，預設為圓形 |
| 典型用途 | 區塊與主視覺背景、按鈕填色、進度條、分隔線 | 聚光燈、柔光暈、暗角、懸停光環、徽章亮點 |
| 關鍵輸入 | 以度數表示的角度 | 圓形狀與中心位置 |
| 所需停駐點數量 | 2 個可做出乾淨漸變，3–4 個可做多色帶混合 | 2 個可做出柔和的中心到邊緣漸變，3 個以上可做出帶狀光暈 |
| 適用場景 | 需要明確方向感的寬廣矩形表面 | 單一光源點能強化設計的緊湊表面 |
如果您想要呈現由左到右或由上到下的方向性淡出效果，就選線性。如果您想要光線從單一點散發出來——例如發光按鈕、主視覺圖片上的舞台聚光燈、引文背後的柔和暗角——就選放射。如果您不確定哪種更適合特定版面配置，線性與放射 CSS 漸層比較會並列展示數個實際的介面範例。
色彩停駐點、位置與角度：最重要的三項輸入
每個 CSS 漸層——無論是線性或放射——都由相同的三項資訊定義。一旦您理解它們，世界上每個產生器的介面都會變得顯而易見。
色彩停駐點
停駐點是沿著漸層在某個位置上取樣的一種色彩。兩個停駐點可以產生乾淨的雙色漸變。新增第三或第四個停駐點，您就可以在特定百分比鎖定某個色彩，把簡單的漸變變成多色帶混合。例如，一個三停駐點的漸層，紅色在 0%、綠色鎖定在 50%、藍色在 100%，會產生紅色、中間一段綠色、然後藍色——而不是平滑的三色彩虹。
停駐點位置
每個停駐點都有一個以百分比表示的位置，範圍從 0% 到 100%。瀏覽器會以插值方式填滿相鄰停駐點之間的色彩，所以 0% 與 100% 的兩個停駐點會產生完整均勻的漸變，而 0% 與 50% 的停駐點則會在前半段產生漸變，後半段則呈現純色塊。產生器會在輸出 CSS 之前將位置限制在有效範圍內並依升序重新排序，這就是為什麼您可以自由拖曳停駐點而不會破壞輸出。
角度（僅限線性）
對於線性漸層而言，角度會告訴瀏覽器混合的方向。CSS 的慣例是從頂端開始順時針計算：0deg 由下往上跑、90deg 由左往右跑、180deg 由上往下跑、270deg 由右往左跑。常見的初學者錯誤是以為寫 0deg 就會得到水平漸層；在 CSS 中，0deg 其實是垂直的。
如何使用色彩漸層產生器建立漸層
視覺化的工作流程刻意設計得很短：選擇類型、調整停駐點，然後複製程式碼。
- 選擇漸層類型。 從線性開始以獲得方向性漸變，或切換到放射以獲得由中心向外擴散的混合效果。預覽會立即更新，讓您能在同一組色彩下比較兩者的差異。
- 設定每個色彩停駐點的顏色，並拖曳其位置滑桿。 兩個停駐點可產生乾淨的雙色漸變；新增第三或第四個停駐點，即可在特定點鎖定或移動色彩。針對線性漸層調整角度，以旋轉混合方向。
- 查看即時預覽，然後點擊複製 CSS。 工具會輸出一個完整的 background 宣告——例如background: linear-gradient(90deg, #ff5e5e 0%, #5effff 100%);——您可以直接貼到樣式表裡。
在幕後，產生器會在每次變更時處理停駐點排序、位置限制與角度運算，所以無論您如何大膽嘗試，輸出的 CSS 都能保持語法正確。如果您想跳脫自己的色彩習慣，可以點擊隨機產生，探索新的組合，並將喜歡的組合作為起點。
漸層在現代介面設計中的應用場景
漸層並非裝飾性的雜訊——它們是在扁平版面中加入層次與層級最經濟的方式之一，因為單一 CSS 屬性就能同時取代背景圖片、按鈕雪碧圖與分隔線圖形。常見的應用位置包括：
- 主視覺與區塊背景，柔和的由上往下漸層能在不使用硬邊界線的情況下，將頁首與下方內容區分開來。
- 按鈕與卡片填色，在懸停時加上細微的線性漸變，比起單純的平面色彩變化，能更清楚地傳達互動性。
- 徽章、標籤與進度條，帶狀漸層能讓小元素感覺更具分量，卻不會增加尺寸。
- 圖片遮罩，由黑到透明的漸層能讓白色文字在繁忙的攝影圖片上仍保持清晰可讀。
- 放射聚光燈與光暈，放射漸層能將注意力聚焦在焦點上——行動呼籲、引文、重點商品。
為什麼輸出內容就只是 CSS（以及這為何重要）
因為輸出內容是純 CSS 值而非匯出的 PNG 或 SVG，所以它繼承了網路平台的所有優點：能在所有現代瀏覽器中運作而無需廠商前綴、不需要外部函式庫、也不會產生任何網路請求。一個 background 宣告就能取代原本的圖片資產、其快取標頭，以及載入時帶來的版面位移。漸層也能完美縮放至任何元素尺寸或螢幕密度，因為瀏覽器是在算繪時即時插值像素，而不是將固定的點陣圖預先光柵化。
所有處理都在瀏覽器本地執行，這表示您實驗的色彩與停駐點永遠不會離開您的電腦。您可以建立可用於正式環境的漸層、複製 CSS，然後直接貼到樣式表裡，無需上傳步驟或註冊表單。如果您想把同樣的概念延伸到更多 CSS 工作上，如何在 CSS 中毫無懸念地取得色彩漸層指南會在視覺化工作流程之外，一併介紹手寫語法。