CSS 漸層是單一背景值，能在元素內平滑混合兩個或以上的顏色,而專屬的產生器可將幾組色彩選擇,轉換成可直接複製貼上到任何樣式表的 CSS 程式碼。您不必再猜測十六進位值,也不必手動計算角度,只需選擇漸層類型、調整色彩,就能從工具直接讀取產生的 linear-gradient() 或 radial-gradient() 宣告。最終會得到一行 background 屬性,無論元素尺寸或螢幕密度為何,都能清晰縮放,而且不需要圖片素材、不發出網路請求,也無需管理建置步驟。
本指南將說明各種漸層類型的實際作用、色彩停點如何控制混合形狀,以及如何使用視覺化產生器來建立可順利套用至真實樣式表的漸層。
線性 vs 放射狀漸層:各自的用途
CSS 漸層產生器能建立目前正式設計中使用的兩種漸層類型。線性與放射狀漸層乍看相似,但運作方式不同,適合的場景也不一樣。
線性漸層沿著您設定角度的一條直線進行平滑混合。角度值從正上方起以順時針方向測量:0deg 指向元素頂端,90deg 指向右方,180deg 指向底部,270deg 指向左方。這個單一數字控制色塊上漸層淡化的方向。當您想要方向性的暈染效果時,線性漸層是最佳選擇——例如橫幅由左至右的刷色、卡片由上至下的淡出,或標題後方的對角混合。
相較之下,放射狀漸層則從中心點以圓形向外擴散混合。產生的程式碼看起來像 radial-gradient(circle, color1, color2),顏色從元素中央向邊緣輻射。放射狀漸層非常適合聚光燈效果、按鈕後方的柔和光暈、影像的暈邊效果,以及任何需要中央發光感而非平面刷色的位置。
簡而言之:背景、橫幅、表面等需要方向性的地方選擇線性;聚光燈、光暈、暈邊等需要點光源效果的地方選擇放射狀。
線性 vs 放射狀 一覽
| 屬性 | 線性漸層 | 放射狀漸層 |
|---|---|---|
| 混合形狀 | 沿設定角度的直線 | 從中心點向外輻射的圓形 |
| 主要控制項 | 角度 (0deg、90deg、180deg、270deg) | 中心位置與形狀 (circle) |
| 常見用途 | 背景、橫幅、按鈕、卡片 | 聚光燈、光暈、暈邊、柔焦亮點 |
| CSS 形式 | linear-gradient(angle, stop1, stop2, ...) | radial-gradient(circle, stop1, stop2, ...) |
| 最佳閱讀情境 | 視線應橫越整個表面時 | 視線應落在焦點上時 |
色彩停點如何決定漸層形狀
每個 CSS 漸層都是由色彩停點定義的。每個停點是一個顏色加上介於 0% 到 100% 之間的位置,瀏覽器會在停點之間平滑內插填滿像素。停點越多,漸層呈現的色帶也越多。
兩個停點是最基本的情況:從一個顏色到另一個顏色的乾淨淡化。這是按鈕填色、卡片背景、橫幅刷色最常用的方式。三或四個停點可讓您在特定位置保留某個顏色——例如在 50% 處精準保留 #00ff00——這會產生多色帶混合,而不是單純的雙色過渡。在藍、白、紅三色組合上使用三停點漸層,會呈現類似國旗的效果;若同樣的顏色只用兩停點,則只會在模糊的紫色中間區域把藍色混進紅色。
產生器可讓您沿著 0–100% 的線拖曳每個停點、新增或移除停點,並依需求重新排序。工具會自動依位置重新排序停點,並在您操作時將每個值限制在有效的 0–100% 範圍內,因此輸出的 CSS 無論編輯多激烈,語法永遠正確。這表示您可以自由實驗,不會產生錯誤的結果。
使用 CSS 漸層產生器
這個產生器專為快速反覆調整而設計。所有運作都在您的瀏覽器本機進行,工作過程中您設計的內容不會上傳到任何伺服器。
- 選擇漸層類型。選擇線性可沿著角度產生方向性淡化,選擇放射狀可從中心向外混合。
- 設定角度 (僅線性) 以控制淡化方向。90deg 由左至右,180deg 由上至下,以此類推。
- 調整色彩停點。點擊停點的色塊開啟選色器,然後輸入十六進位值,或拖曳位置滑桿沿著 0–100% 線移動停點。
- 新增或移除停點,直到混合呈現您想要的色帶。兩停點產生乾淨淡化;三或四停點產生多色帶效果。
- 即時預覽會隨著您的操作更新,點擊 Copy CSS 即可取得完整的 background 宣告,貼到您的樣式表中。
色彩漸層產生器將控制項與預覽放在同一個畫面,讓您在微調每個停點與角度時即時看到渲染結果。當結果滿意時,一鍵即可將 CSS 複製到剪貼簿。
若想嘗試基於相同兩停點混合的不同色彩配對工作流程,請參考如何在 Discord 中取得色彩漸層,內容涵蓋選定色彩配對套用後的實際顯示效果。
CSS 漸層在真實介面中的最佳應用位置
純 CSS 漸層在現代介面設計中無處不在,因為幾乎沒有傳輸成本,而且在任何尺寸下都看起來銳利清晰。最常出現的地方包括:
- 主視覺與區塊背景,單一方向性刷色取代平面品牌色。
- 按鈕與卡片填色,短幅線性漸層在不靠陰影的情況下增加層次。
- 徽章、藥丸標籤與標記,小型放射狀漸層在標籤後方營造發光效果。
- 進度條與狀態計量器,水平淡化讓填色區段看起來具有活動感。
- 懸停與焦點狀態,細微的漸層變化暗示可互動性。
- 影像遮罩,透過在標題後方加深相片來保持白色文字的可讀性。
- 區塊之間的裝飾分隔線,完全以 CSS 繪製,不需要圖片素材。
由於輸出是單一 background 屬性而非匯出的圖片,以上所有用途在任何元素尺寸或螢幕密度下都能清晰縮放。不需要為 Retina 顯示器重新匯出 PNG,也不需要維護 SVG——漸層直接存在於樣式表中,與其他設計代號並列。
瀏覽器支援與輸出格式
linear-gradient() 與 radial-gradient() 都是標準 CSS,在所有現代瀏覽器中皆可運作。不需要廠商前綴、不需要外部函式庫、不需要 polyfill 腳本,也不需要建置步驟。產生器會輸出一個完整的 background 宣告——background: linear-gradient(...); 或 background: radial-gradient(...);——您可直接貼入樣式表,原封不動地使用。
正是這種可攜性讓產生器值得使用。您不必手寫角度與停點位置、反覆檢查語法,只需移動滑桿直到預覽看起來滿意,再複製完成的程式碼即可。產生器處理格式,您專注設計決策。
讓漸層在正式環境中依然耐看的訣竅
幾個習慣就能讓漸層看起來精緻或看起來像是意外產生的。
保持在相關色系範圍內。青色到紫色的混合看起來是單一、有意圖的刷色。青色到橘色的混合則會在中間產生混濁的中間色,看起來像 JPEG 失真。選擇在色環上彼此靠近的起始與結束色調,讓內插產生愉悅的效果。
兩個停點保持在相同的亮度區段。兩個亮色混合成亮色結果,兩個暗色混合成暗色結果。由暗到亮的漸層適合用於刻意的淡入效果,但作為背景往往過於搶眼,因此應在前景內容可讀性已處理好的情況下才使用。
使用三停點混合在中央固定一個顏色。如果您希望視線落在漸層中央的特定色調上,可在 50% 位置用第三個停點固定該顏色,而不是讓兩端色彩在中間糊掉。產生器的停點控制只需一次拖曳即可完成。
嘗試 Randomize 按鈕以跳脫慣用配色。按下 Randomize 會為停點填入全新的組合,這往往是您手動不會選到的配色,而最漂亮的漸層常常就來自這裡。
這些規則都不會被工具強制執行。它們是值得牢記的設計慣例,當預覽看起來滿意、即將把結果寫入樣式表時,請記得參考。
貼上之前先讀懂輸出內容
程式碼面板會輸出完整宣告——background: linear-gradient(90deg, #3366ff 0%, #00ccff 100%);——讓您能直接讀回並確認瀏覽器即將渲染的內容。角度、顏色與每個停點的位置都會顯示在字串中。這樣能輕易發現錯字、在不重新開啟選色器的情況下替換十六進位值,或在設計系統需要略微不同的中點時,直接在程式碼中微調停點位置。
當結果滿意時,點擊 Copy CSS 並將宣告貼入目標元素的規則中。由於所有運作都在瀏覽器本機進行,您設計的內容永遠不會上傳到伺服器,反覆調整既快速又保有隱私。
若您正在權衡選項,色彩漸層產生器替代方案:本機瀏覽器工具對此有詳細說明。