色彩漸層產生器會把幾個選定的顏色轉成可直接複製的 CSS 背景值，讓你直接貼進樣式表。輸出是單一宣告 —— `background: linear-gradient(...)` 或 `background: radial-gradient(circle, ...)` —— 任何現代瀏覽器都能直接渲染，不需要圖片、JavaScript 函式庫或建置步驟。你可以使用視覺化控制項，而不必記角度數值或停止點語法:選擇漸層類型、挑選顏色、在 0–100% 範圍內拖曳每個停止點的位置、調整線性漸層的角度，每次變更時預覽都會即時更新。當結果看起來滿意時，只要按一下就能把完整宣告複製到剪貼簿。整個流程都在你的瀏覽器中本地執行，因此你設計的任何內容都不會上傳到伺服器。視覺化編輯加上即時且有效的輸出，正是 CSS 漸層產生器對任何需要「今天就能上線」而非「明天才能上線」的漸層的人都很有用的原因。
工具會寫到剪貼簿的內容
色彩漸層產生器會輸出單一 CSS 背景宣告。以線性漸層來說，內容類似 `background: linear-gradient(90deg, #ff6b6b 0%, #4ecdc4 100%);`。以放射狀漸層來說，則是 `background: radial-gradient(circle, #ff6b6b 0%, #4ecdc4 100%);`。這個值就是純粹的 CSS —— 沒有廠商前綴、沒有 `-webkit-` 替代寫法、沒有圖片參照、沒有外部字型或 SVG 酬載。你可以貼到任何樣式表，瀏覽器會即時在停止點之間進行顏色內插。
由於輸出是計算後的樣式值，而不是匯出的 PNG 或 JPEG，因此漸層在任何尺寸和任何螢幕密度下都能保持銳利。同樣的宣告既能填滿 320 像素的按鈕，也能覆蓋 1920 像素的主視覺橫幅而不會顯得模糊或出現像素顆粒，而且在頁面載入後完全不會再發出網路請求。
輸出中有兩個部分值得特別注意，因為它們決定了漸層的視覺效果:
- 角度(Angle) —— 僅出現於線性漸層。0deg 指向元素頂端，90deg 指向右側，180deg 指向底部，270deg 指向左側。角度會圍繞元素中心旋轉混色方向。
- 色彩停止點(Color stops) —— 每個漸層都是一連串 顏色 + 位置 配對。位置是 0% 到 100% 之間的百分比，瀏覽器會在相鄰停止點之間內插像素。
線性與放射狀一覽
兩種漸層類型解決不同的設計問題，事前選對類型能省下大量返工。下表整理出實務上的主要差異。
| 屬性 | 線性漸層 | 放射狀漸層 |
|---|---|---|
| 混色方向 | 沿著你設定角度的直線 | 從中心點向外呈圓形擴散 |
| 主要控制項 | 角度(度數，0–360) | 形狀與中心位置 |
| 典型視覺 | 方向性漸淡、對角掃描、曙光效果 | 聚光燈、柔光暈、暗角 |
| 常見用途 | 主視覺背景、區塊填色、按鈕、卡片、進度條 | 聚光效果、光暈點綴、hover 狀態、裝飾性色塊 |
| CSS 函式 | linear-gradient(angle, color1, color2) | radial-gradient(circle, color1, color2) |
| 瀏覽器支援 | 所有現代瀏覽器，不需前綴 | 所有現代瀏覽器，不需前綴 |
當你希望視線橫越整個表面時，選線性 —— 例如主視覺橫幅的由上至下、寬幅按鈕的由左至右，或 45 度角的對角掃描。當你希望顏色像光源或焦點時，選放射狀:標題後方的柔和白光暈、卡片下方的彩色聚光，或把視線拉回主視覺圖片中心的暗角效果。
三步驟建立漸層
- 選擇漸層類型。想要方向性漸淡就選 線性(Linear)，想要由中心向外混色就選 放射狀(Radial)。預覽會立即更新，你可以在選定之前先用同一組顏色比較兩種效果。
- 設定色彩停止點。每個停止點包含顏色與 0% 到 100% 之間的位置。點選停止點來變更顏色，拖曳滑桿來調整位置，並使用控制項來新增或移除停止點。如果是線性漸層，調整角度滑桿——0deg 指向上方，90deg 指向右側，180deg 指向下方，270deg 指向左側。你也可以按下「Randomize」(隨機產生)來探索自己手動挑選時可能沒想到的新組合。停止點會自動依位置重新排序，並限制在有效的 0–100% 範圍內，因此無論你如何編輯，輸出的 CSS 都永遠語法正確。
- 檢視即時預覽，然後複製 CSS。預覽會在你編輯時，以內嵌方式顯示實際渲染結果。當看起來滿意時，點選 複製 CSS(Copy CSS) 取得完整的 `background: ...;` 宣告，貼到你的樣式表即可。
線性漸層角度對照
線性漸層角度遵循 CSS 慣例:0deg 指向元素頂端，角度依順時針方向遞增。下表列出最常用的角度，以及每個角度對混色的影響。
| 角度 | 混色方向 |
|---|---|
| 0deg | 由下而上(垂直，指向上方) |
| 45deg | 由左下到右上(對角) |
| 90deg | 由左至右(水平) |
| 135deg | 由左上到右下(對角) |
| 180deg | 由上至下(垂直，指向下方) |
| 270deg | 由右至左(水平，反向) |
選擇的角度會決定第一個顏色的起點與最後一個顏色的結束位置。同樣兩個顏色，只是改變角度，看起來就會是完全不同的設計 —— 90deg 的藍到粉紅漸層像夕陽，而同一組顏色在 180deg 下，則像是從深水逐漸過渡到明亮水面。
漸層在實際介面中的應用位置
漸層能在需要視覺份量、卻不需要照片的表面上發揮作用。在現代介面設計中，最常見的擺放位置包括:
- 主視覺與區塊背景。對角漸層能為主視覺橫幅帶來平面顏色無法呈現的層次感，而且在任何尺寸下都保持銳利。
- 按鈕與卡片填色。短短一段線性漸層就能讓按鈕顯得有立體感，從頁面上跳出來，卻不必額外加上陰影。
- 徽章、藥丸標籤與標記。小型的標籤晶片使用雙停止點漸層，比起單一色塊更顯精緻。
- 進度條與載入狀態。進度條上的移動漸層能傳達動感，暗示工作正在進行。
- Hover 狀態。在游標或聚焦框下加一層柔和的放射狀光暈，能吸引注意，卻不會與整體配色產生衝突。
- 讓白色文字保持可讀的圖片疊加。在照片上方鋪一層線性漸層，可加深其中一邊，使說明文字在任何照片上都保持清晰。
- 裝飾性分隔線。細細一條水平漸層能取代生硬的實線，作為區塊之間的柔和分隔。
因為這些用途都只是單一 CSS 屬性，你可以透過編輯存放漸層值的變數，在整個設計系統中一次替換顏色或角度。沒有圖片資產需要重新匯出，也沒有雪碧圖需要重建。
挑選經得起考驗的顏色
漸層的好壞取決於你放進去的那兩(或三、四)個顏色。以下幾個習慣會帶來明顯差異:
- 從整組調色盤開始，而非單一顏色。搭配使用 色彩調色盤產生器，可取得互補色、類似色與三等分色等已經具有和諧關係的配對，讓漸層看起來是刻意設計，而不是隨機拼湊。
- 想要色帶而非漸淡時，把顏色固定在中點。兩個停止點會產生平滑漸淡。三個停止點 —— 例如 0% 紅、50% 黃、100% 青綠 —— 則形成多段色帶，中間顏色會在中央保留，而不是完全被混色蓋過。
- 檢查上方文字的對比度。白色文字放在淺色漸層上，很快就會看不清楚。把漸層(或其中最淺的部分)與文字顏色透過 色彩對比檢查工具檢查後再上線。WCAG 2.2 要求內文文字至少 4.5:1，大型文字至少 3:1。
- 在小尺寸下測試。在 1200 像素看起來豐富的漸層，放進 24 像素的晶片裡可能變得混濁。請用你實際打算使用的尺寸來預覽。
如果你正在權衡選項，線上使用色彩漸層產生器安全嗎?對此有詳細說明。