CSS 漸層產生器會根據幾個色彩停駐點和一個角度，產生可直接貼上的 linear-gradient() 與 radial-gradient() 宣告。本指南中的每個漸層產生器範例都是一段獨立的 CSS 值，你可以直接複製到樣式表，再依需求修改顏色或位置。Color Gradient Generator 讓你在瀏覽器中重現這些範例，使用滑桿調整停駐點，並即時預覽更新結果。兩個停駐點可在兩種顏色之間產生乾淨的漸變；三個或更多停駐點則能讓某個顏色固定在特定位置，形成多層次的混色。對線性漸層而言，0deg 角度指向上方，90deg 指向右方，180deg 指向下方；對放射狀漸層而言，瀏覽器會以中心點為圓心向外混合。每個下方展示的範例都能在不手寫程式碼的情況下，以視覺化方式重建，而且它所輸出的 CSS 永遠會把停駐點位置限制在有效的 0–100% 範圍內。
「漸層產生器範例」真正的含義
實際上，一個漸層產生器範例由三個要素組成：漸層類型（線性或放射狀）、角度或中心點，以及一連串位置介於 0% 到 100% 之間的色彩停駐點。瀏覽器會在停駐點之間自動內插像素值，負責剩下的工作。這就是為什麼簡單的雙色漸變和複雜的夕陽混色使用完全相同的 CSS 語法——差別只在於停駐點的數量與顏色。
以有系統的方式檢視這些範例，能幫助你針對特定工作挑選合適的項目。下表依照 CSS 形狀與適合的介面元素，整理出最常見的設定組合。Color Gradient Generator 以相同的視覺化流程建構所有項目，所以一旦掌握其形狀，就無需死記語法，也能重現出來。
| 範例 | 類型 | CSS 形狀 | 最適用於 |
|---|---|---|---|
| 水平漸變 | 線性 | linear-gradient(90deg, color1, color2) | 主視覺背景、卡片底色 |
| 垂直暈染 | 線性 | linear-gradient(180deg, color1, color2) | 固定列、分隔區塊 |
| 對角光澤 | 線性 | linear-gradient(45deg, color1, color2) | 按鈕高光、橫幅 |
| 聚光燈 | 放射狀 | radial-gradient(circle, color1, color2) | 按鈕、圖片疊加層 |
| 柔和暈影 | 放射狀 | radial-gradient(circle, color1, color2) | 相片邊緣、主視覺光暈 |
| 多層次混色 | 線性（3 個停駐點） | linear-gradient(angle, c1 0%, c2 50%, c3 100%) | 分隔區塊、進度條 |
可直接複製的線性漸層範例
線性漸層是網頁背景的主力。它沿著你設定的角度以直線延伸，大多數介面只需要兩到三個精心挑選的停駐點，就能呈現精緻的效果。
- 側邊欄點綴（上到下）：在較深的品牌色與略淺的色調之間，以 180deg 的線性漸層產生低調的垂直暈染，能吸引目光，又不會干擾內容。
- 主視覺橫幅（左到右）：以 90deg 混合兩種互補色，能讓寬廣的橫向區塊產生動感，特別適合放在大型標題後方。
- 按鈕光澤（135deg）：在實色按鈕底色上疊加接近白色至透明的漸層，能產生設計師在主要動作按鈕上常用的經典「壓克力反光」效果。
- 進度條填色（90deg）：使用兩個停駐點、搭配略淺的中間色調，能讓扁平進度條在小型尺寸下也呈現立體感。
Color Gradient Generator 中的角度滑桿讓這些範例可以即時調整。0deg 指向上方，90deg 指向右方，180deg 指向下方，因此上面四個範例都能在數秒內旋轉方向，不必重寫 CSS。
聚光燈與光暈用的放射狀漸層範例
放射狀漸層從中心點以圓形向外混合，非常適合製作聚光燈、光暈與柔和暈影效果。線性漸層看起來像是有方向的掃光，放射狀漸層則像是局部的光源。
- 按鈕光暈：在彩色按鈕上方疊加一個小型的 radial-gradient(circle, white, transparent)，就能營造光線打在表面的感覺，無需額外標記。
- 主視覺聚光燈：在主視覺區塊後方放置一個大範圍的 radial-gradient(circle, color1, color2)，能將注意力推向焦點，例如標題或產品圖片。
- 提升可讀性的圖片疊加層：在照片上覆蓋一層從透明到深色的放射狀漸層，能讓白色文字保持清晰，又不會使圖片失去層次，因為疊加效果在文字所在的位置最強。
- 卡片暈影：在卡片邊緣使用柔和的 radial-gradient(circle, transparent 60%, shadowColor 100%)，能讓內容從背景中浮現出來。
產生器中的放射狀選項會產生標準的 radial-gradient(circle, ...) 形狀。第一個停駐點為中心顏色，最後一個停駐點為外部顏色，瀏覽器會自動填滿中間的區域。
多停駐點漸層：在中間加入顏色
相較於簡單的雙色漸變，加入第三或第四個停駐點能帶來最大的視覺升級。每個停駐點包含一個顏色與介於 0% 到 100% 的位置，瀏覽器會平滑地內插中間的像素。例如在 50% 加入一個停駐點，就能讓品牌色固定在漸層中央，並在兩側轉換到不同色相。
常見的多停駐點範例包括：
- 夕陽色帶：以三個停駐點排列——0% 為溫暖的珊瑚色、50% 為鮮亮的橘色、100% 為深洋紅——就能產生類似地平線的暈染效果，完全不需要圖片素材。
- 品牌色彩轉換：在兩種品牌色之間插入一個中性中繼點（例如白色或柔和的灰色），能讓漸層在中央呈現平靜的過渡，而不是把兩個高彩度顏色硬碰在一起。
- 固定與位移：在相鄰的兩個停駐點使用相同的顏色值（例如 color1 在 0% 與 color1 在 30%），就能在較柔和的過渡前形成一條硬色帶，適合用來分隔區塊。
產生器會在你拖曳停駐點時依位置自動重新排序，因此可以放心嘗試，不必擔心建立順序的問題。任何超出範圍的位置都會被限制在有效的 0–100% 區間內，代表輸出的 CSS 永遠語法正確。
如何在 Color Gradient Generator 中建立這些範例
- 開啟 Color Gradient Generator，選擇漸層類型——Linear 用於方向性漸變，Radial 用於由中心向外擴散的混色。
- 使用色彩選擇器設定每個停駐點的顏色，再拖曳位置滑桿將其放到漸層條上；可依需要新增或移除停駐點，以符合你要重現的範例。
- 對線性漸層而言，調整角度滑桿讓混色方向符合需求（0deg 向上、90deg 向右、180deg 向下）。
- 對照要複製的範例檢視即時預覽，微調顏色或位置直到渲染結果相符。
- 點擊 Copy CSS 取得完整的 background: linear-gradient(...); 宣告，直接貼到你的樣式表中。
每個步驟都在你的瀏覽器中本機執行，因此設計過程中不會有任何內容上傳到伺服器。如果你對起始配色沒有頭緒，可以借助像 Color Palette Generator 這類相關工具，產生互補或類比色組合，再套用為停駐點。
CSS 漸層在真實介面中的應用場景
漸層在現代介面設計中無處不在，因為單一 CSS 屬性就能取代過去必須匯出圖片才能完成的效果。常見的應用位置包括：
- 主視覺與區塊背景：滿版的漸層能為頁面定調，又不會產生 JPEG 或 PNG 的檔案負擔。
- 按鈕與卡片底色：緊湊的線性漸層能讓扁平表面在小型尺寸下呈現深度感。
- 標籤與膠囊：以 90deg 混合兩種品牌色，能把標籤變成辨識度高的晶片。
- 進度條：左到右、搭配較亮中點的漸層，能表現出立體的動感。
- Hover 狀態：Hover 時細微的色相變化能暗示可互動性，不需要額外素材。
- 圖片疊加層：在照片上疊加放射狀或線性漸層，能讓上層文字保持可讀，又不會使圖片失去層次。
- 裝飾性分隔線：從透明到品牌色的水平漸層，能乾淨地分隔各區塊。
由於輸出的是純 CSS 而非匯出圖片，它在所有目前瀏覽器中皆可使用，無需供應商前綴、不必依賴外部函式庫、也不必經過建置步驟。一個 CSS 屬性、零個網路請求，產生的漸層在任何元素尺寸或螢幕解析度下都能保持銳利，絕不會出現模糊或像素化的問題。
挑選在漸層中協調的顏色
漸層看起來有設計感，是因為停駐點之間存在底層關聯，而不是因為它們單獨看起來好看。三種方法能產生可靠的結果：
- 相同色相、不同明度：同一顏色的兩個深淺（例如深藍色與較淺的天空藍）會呈現精緻的色調變化，幾乎不會互相衝突。
- 類比色相：色環上相鄰的顏色（例如藍色與青色）因為底層色素相近，能自然地混合。
- 互補對比：色環上相對的顏色能產生最具能量的漸層，因此最適合用在短範圍，例如按鈕高光，而非整頁背景。
當兩個高彩度顏色相遇時，它們的中點常常顯得混濁。最簡單的解決方法是在 50% 位置插入一個中性停駐點（白色、淺灰，或低彩度的橋接色），而產生器中的多停駐點控制項讓這項調整只需拖曳一次。對於需要嚴格符合品牌規範的專案，使用文件化的十六進位色碼來建立漸層，就能消除顏色呈現方式的任何不確定性。
如果你正在權衡各種選項，Web Safe Colors Examples: HEX Codes From the 216 Cube 對此有詳細說明。
如果你正在權衡各種選項，How to Decide Whether You Need a CSS Checkbox Generator 對此有詳細說明。