漸層產生器是一種基於瀏覽器的視覺工具，能將幾組色彩選擇與色標位置轉換成可直接貼上的 CSS 背景宣告，省去手寫漸層語法或猜測角度與百分比值的麻煩。你先選擇漸層類型 — 線性適用於方向性漸淡，徑向適用於由中心向外混合 — 接著設定每個色標的顏色，並在 0% 到 100% 之間拖曳其位置滑桿。工具會讀取你的輸入，將每個值限制在有效範圍內，然後輸出一個可直接放入樣式表的單一 background 屬性。即時預覽會在你操作時顯示精確的渲染結果，因此你無需重新整理頁面，就能確認角度、中間色標顏色或兩個色標之間的平滑漸淡是否符合預期。當結果符合設計時，點擊一下就能將 CSS 複製到剪貼簿。所有運作都在你的瀏覽器本地進行，因此你設計的內容絕不會被上傳到伺服器，而輸出就是純 CSS，能在任何元素尺寸或螢幕密度下都保持清晰銳利。
漸層產生器能建立什麼
漸層產生器會將色彩選擇與色標位置轉換成可貼入任何樣式表的 CSS background 宣告。實際應用於生產介面中的漸層類型有兩種：linear-gradient() 沿著你設定的角度（0deg 朝上、90deg 朝右、180deg 朝下）進行平滑混合，而 radial-gradient(circle, ...) 則從中心點向外混合 — 非常適合聚光燈、按鈕與柔和光暈效果。
每個漸層都由色標定義。每個色標包含一個顏色和一個介於 0% 到 100% 的位置，瀏覽器會自動內插處理中間的像素。兩個色標能產生從一種顏色到另一種顏色的乾淨漸淡；加入第三或第四個色標，就能讓某個顏色停留在特定位置（例如在 50% 處設為 #00ff00），進而獲得多段式混合效果，而非單純的雙色漸變。產生器會為你處理所有這些細節。你只需挑選顏色、將色標拖到想要的位置，再讀回精確的 CSS。
輸出是純 CSS 而非匯出的圖片，這正是產生器工作流程比在繪圖工具中設計漸層、匯出 PNG、再透過建置管線上傳更快的核心原因。一個屬性、零次網路請求，漸層在任何元素尺寸或螢幕密度下都能保持清晰銳利，絕不會顯得模糊或出現像素化。
線性 vs 徑向：選擇類型
第一個決策是哪種漸層類型符合設計需求。線性漸層沿著你可透過角度控制的方向延伸，因此呈現出動態或方向感 — 適合用於主視覺背景、全寬橫幅、按鈕填色，以及任何希望視線沿著路徑移動的場景。徑向漸層則從中心向外混合，因此呈現出光線、深度或聚焦感 — 適合用於聚光燈效果、產品卡片後方的光暈、柔和的暈影、徽章與藥丸形背景。
下表總結了兩種類型之間的實際差異：
| 面向 | 線性漸層 | 徑向漸層 |
|---|---|---|
| 混合方向 | 沿著你設定的角度（0deg 向上、90deg 向右、180deg 向下） | 從中心點向外 |
| 語法形式 | linear-gradient(angle, stops) | radial-gradient(shape, stops) |
| 可調軸向 | 角度滑桿 | 固定的圓形 |
| 最適用於 | 區塊背景、按鈕、卡片、橫幅 | 聚光燈、光暈、柔和暈影、徽章 |
| 典型色標數量 | 乾淨漸淡用 2–4 個，多段混合則更多 | 柔和光暈與中心漸淡用 2–3 個 |
如果難以抉擇，全寬介面預設使用線性，而需要感覺像有光源的元素則使用徑向。你可以隨時切換類型，相同的色標會呈現出不同的效果，因此類型選擇只是起點，而非最終決定。
使用色彩漸層產生器建立漸層
色彩漸層產生器能在單一畫面中引導你完成整個流程：選擇類型、調整色標、預覽結果、複製程式碼。請依照以下步驟，從空白畫布到完成的 CSS 宣告：
- 選擇漸層類型。方向性漸淡選擇線性，中心向外混合選擇徑向。預覽會立即更新，讓你看到顏色將朝哪個方向流動。
- 設定每個色標的顏色。點擊色標的顏色色塊開啟選擇器，然後選擇任何 HEX、RGB 或具名顏色。預設的兩個色標提供簡單的漸淡；你可以新增更多色標，以便在特定位置固定或轉換顏色。
- 拖曳每個色標的位置滑桿。位置範圍從 0% 到 100%。工具會將每個值限制在這個有效範圍內，因此你可以自由拖曳而不會破壞語法。
- 調整線性漸層的角度。角度滑桿設定混合方向 — 0deg 向上、90deg 向右、180deg 向下。微調直到漸層呈現出你想要的感覺。
- 重新排序或移除色標。產生器會自動依位置重新排序色標。移除色標可簡化漸淡，新增色標則可在色帶中間引入新顏色。
- 檢查即時預覽。預覽會顯示精確的渲染結果，因此你無需重新整理樣式表，就能看到色標位置或角度變更的實際效果。
- 點擊複製 CSS。一鍵即可取得完整的 background 宣告 — 可立即貼入你的樣式表。
如果結果仍不盡理想，可以使用「隨機產生」控制項來探索你可能手動不會選擇的全新組合。隨機產生之後你仍可繼續調整，因此這只是起點，而非最終答案。
複製 CSS 並貼入你的專案
當預覽符合你的設計時，點擊「複製 CSS」即可複製完整宣告。程式碼面板會印出完整的 background 屬性 — 類似 background: linear-gradient(90deg, #4f46e5, #ec4899); — 「複製 CSS」會將該字串精確地放入你的剪貼簿。
將宣告貼到任何接受 background 的選擇器上：用於整頁漸淡的 body 元素、用於 hover 填色的按鈕 class、用於分層背景的卡片外層或主視覺區段。由於輸出是純 CSS 而非匯出的圖片，它能在所有現代瀏覽器中運作，無需廠商前綴、無需外部函式庫，也無需建置步驟。漸層在任何元素尺寸或螢幕密度下都能保持清晰銳利，絕不會顯得模糊或出現像素化。
如果之後需要反覆修改，可以直接在 CSS 中編輯貼入的字串 — 一組固定的色標和角度，在每個使用該屬性的元素上永遠會以相同方式呈現。
CSS 漸層在實際介面中的應用
漸層在現代介面設計中無所不在：主視覺與區塊背景、按鈕與卡片填色、徽章與藥丸形元件、進度條、hover 狀態、讓白色文字保持可讀性的圖片疊加層，以及內容區塊之間的裝飾性分隔線。選擇兩個、三個或四個色標，會大幅改變同一介面的視覺感受。兩個色標產生乾淨的方向性漸淡 — 最簡單橫幅與按鈕的預設選擇。三個色標讓你能在主視覺漸層中央固定品牌色，或建構橫跨整個色帶、改變色相與亮度的夕陽效果。四個或更多色標則適用於多段式混合，讓每種顏色各自佔據明確範圍，而非平滑融入下一個顏色。
由於輸出僅是一個 CSS 屬性，相同的漸層能在數十個元素間重複使用，僅需更改一行就能換成不同的調色盤，且無需匯出新圖片或將素材送入建置流程就能反覆調整。如果你需要更深入的比較，了解各種漸層類型適合的特定場景，可以參考線性與徑向 CSS 漸層比較。
CSS 輸出 vs 匯出圖片
基於圖片的漸層 — PNG、含有複雜路徑的 SVG，或設計工具匯出檔 — 會將你鎖定在固定解析度、增加一次網路請求，且每種螢幕密度都需要獨立的檔案。CSS 漸層則以一個屬性取代了這一切，瀏覽器可即時以任何尺寸進行渲染。無需上傳素材、無需設定 CDN，也無需擔心在 4K 螢幕上匯出檔案會出現像素化。
色彩漸層產生器會以這種 CSS 原生形式產生輸出。拖曳或重新排序色標時，工具會自動依位置重新排序，並將每個值限制在有效的 0–100% 範圍內，因此無論你如何編輯，所印出的 CSS 在語法上永遠正確。你可以微調角度、調整每個色標的顏色與位置、新增或移除色標，或使用「隨機產生」探索全新組合。當結果看起來滿意時，點擊一下就能將 CSS 複製到剪貼簿，並與設計系統的其他部分放在同一份樣式表出貨。
如果你正在權衡各種選項，使用 CSS 核取方塊產生器時應避免的錯誤對此有詳細說明。