CSS 色彩漸層是瀏覽器透過 linear-gradient() 或 radial-gradient() CSS 函式,在兩個或更多顏色之間所產生的一種平滑過渡效果,每個色標會沿著漸層線,以 0–100% 的比例尺定位。最簡單的取得方式,就是視覺化地選擇漸層類型、設定顏色及其色標位置,然後把產生的 background 宣告直接複製到你的樣式表。這種做法省去了手寫顏色值和角度的來回嘗試,而 Color Gradient Generator 正是為這樣的工作流程而設計:挑選色標、即時預覽,然後點擊複製即可取得可直接上線的 CSS。
漸層在現代網頁設計中幾乎無所不在。主視覺區、按鈕、卡片、圖表,甚至文字外框都會使用漸層來增加層次感,而不必額外使用圖片檔案。因為 CSS 的漸層只是 background-image 裡的一個值,它可以縮放到任何螢幕尺寸而不失真,檔案體積也極小。麻煩的是,手寫語法(角度、色標位置、顏色格式)很容易出錯,一個放錯的百分比符號或顏色值,可能就會產生一片純色或出現條紋瑕疵。視覺化工具能把這些繁瑣的數值,變成你可以即時拖曳調整的物件。
如果你偏好手寫漸層,其底層語法在 MDN 的 CSS images 模組中有完善的說明。但對大多數專案來說,最務實的做法是視覺化建構後再複製結果。以下是完整的工作流程,以及如何選擇線性或徑向、何時加入額外色標,還有如何驗證漸層依然符合無障礙規範。
線性與徑向:哪種漸層適合你的設計
在開始挑選顏色之前,先決定漸層應該如何流動。兩種 CSS 漸層類型各有不同的視覺目的,正確的選擇取決於容器的形狀和你想要營造的氛圍。
| 漸層類型 | 方向 | 最適用於 | 常見的 CSS 函式 |
|---|---|---|---|
| 線性 (Linear) | 沿著一條直線,透過角度控制(例如 90deg、to right、45deg) | 橫幅、按鈕、文字背景、需要動感或方向感的區塊 | linear-gradient(angle, color 1, color 2) |
| 徑向 (Radial) | 從中心點向外擴散(預設為元素的中心) | 聚光燈效果、徽章、形頭像、柔和的暈影 | radial-gradient(shape, color 1, color 2) |
| 錐 (Conic) | 著中心點旋轉掃過 | 色環、圖表、裝飾性邊框 | conic-gradient(from angle, color 1, color 2) |
對大多數頁面層級的背景和行動呼籲按鈕來說,線性漸層是較安全的選擇,因為它在寬螢幕上的方向性非常清晰。徑向漸層雖然視覺效果更戲劇性,但往往會把視覺重心固定在一個點上,有時會與其他版面元素相互衝突。CSS gradient guide 詳細說明了兩者的語法差異,如果你想並排比較可以參考看看。
逐步建構你的漸層
最可靠的工作流程,是視覺化設定漸層、預結果,然後複製 CSS。請按照下列步驟依序操作,搭配使用 Color Gradient Generator。
- 開啟 Color Gradient Generator,選擇漸層類型:線性 (Linear) 適用於有方向性的漸層,徑向 (Radial) 適用於由中心向外混合的效果。
- 挑選第一個色,輸入 HEX 值、使用選色器,或貼上你已有的值(若需先轉換格式,請參考 RGB to HEX)。
- 調整第一個色標的位置滑桿。每個色標都位於 0–100% 的比例尺上,其中 0% 是漸層的起點,100% 是終點。
- 點擊 Add Stop 建立第二個顏色,設定其 hex 值,並拖曳滑桿控制過渡落點。兩個色標會產生經典的雙色漸層;三個或更多色標則能創造更豐富的混合效果。
- 如果選擇的是線性漸層,請設定角度,例如 90deg 由左至右漸層、180deg 由上至下漸層,或 45deg 的對角線流向。
- 調整時觀察即時預覽的更新。瀏器算繪的結果會與訪客實際看到的畫面一致,因此請利用這個預覽來判斷間距、平衡與色彩協調性。
- 點擊 Copy CSS 取得可直接貼上的
background宣告,然後貼到樣式表中對應的選擇器上,例如主視覺區、按鈕、卡片或其他元素。
如果視覺預覽中的某個步驟沒有產生你想要的樣子,最常見的修正方式是將色標位置微調 5–10%,而不是直接更換顏色。微幅的位置調整,通常比小幅的色相變動產生更大的視覺效果,還能維持原有的配色。
挑選和諧的色彩組合
漸層的好壞完全取決於其中混合的顏色。避免混濁或突兀過渡的快速方法,就是從一個已知好用的調色盤開始,而不是一次挑一個顏色。
- 從 Color Palette Generator 這類工具取得調色盤,它能從任何基色產生互補色、類似色、三等分色和分裂互補色等組合。
- 讓各色標的明度值彼此接近。兩個明度差距過大的色標會在中間產生一條明顯的「界線」;明度差距在 20–30% 內的色標,混合起來會更為平滑。
- 如果品牌規範只提供 RGB 或 HSL 值,請先用 RGB to HEX 轉成 HEX,再貼到漸層工具中。
- 若想預覽任意兩色的混合效果,可以使用 Color Mixer,它會即時顯示兩色之間的漸層,以及混合後的中間值。
如果你同時為印刷品和螢幕進行設計,請記住螢幕上的 RGB 漸層不會與 CMYK 輸出完全相符。將檔案送印前,請先用 RGB to CMYK 轉換品牌色,讓印刷版本盡可能接近你在螢幕上看到的樣子。
漸層的無障礙與對比
當文字置於漸層之上時,漸層可能會與無障設計產生衝突,因為對比會隨著表面位置而變化。一個在漸層某端通過對比檢查的按鈕標籤,在另一端可能就會不及格。
請使用 Color Contrast Checker 來測試最關鍵的文字——通常是漸層最淺和最深兩端——與相關文字樣式的對比。根據 WCAG 2.2 AA,內文應達到 4.5:1 的對比,大字應達到 3:1。如需更深入的說明,WCAG contrast guide 以淺白易懂的方式解釋了這些規則。當漸層的對比過低、無法承載內文時,常見的修正方式是:在文字下方加入一層純色罩紗 (scrim),或將文字置於漸層中的一段純色區塊上。
常見的漸層問題與快速修正
即使有好的工具,還是有些問題會反覆出現。以下說明它們的成因,以及如何在不重頭開始的情況下解決。
| 問題 | 可能原因 | 修正方式 |
|---|---|---|
| 漸層中間看起來平淡 | 兩個色標放得太近(例如 40% 和 60%),使過渡擠在狹窄的區段 | 將色標位置往邊緣移動(0–20% 與 80–100%),讓過渡涵蓋更大的面積 |
| 出現可見的條紋(顏色條狀而非平滑漸層) | 覽器能顯示的顏色階梯有限,跨度大、明度差距極端的長漸層最常受影響 | 縮小色標之間的明度差距,或使用有利於抖動的漸層端點與較短的角度 |
| 漸層忽略元素尺寸 | 徑向漸層的預設大小是 farthest-corner;線性漸層的角度是相對於容器 | 明確設定大小(例如 circle at 30% 30%),或改用百分比大小以獲得可預測的尺寸 |
| 漸層上的文字難以閱讀 | 漸層不同區域的對比不同 | 加入半透明的罩紗,或對漸層兩端分別用對比檢查工具測試 |
| 印刷顏色與螢幕差異極大 | RGB 漸層並非設計用於 CMYK 複製 | 印刷前先將色標轉成 CMYK,或接受可印刷的色彩偏移 |
這些問題大多在發現後只要花一分鐘就能修正。關鍵在於以實際頁面中的元素尺寸進行預覽,而不是只看那個小預覽窗——在宣告漸層完成之前,先把 CSS 貼到你的專案中測試。
統整所有步驟
一個可靠的色彩漸層,只是兩個或更多色標經過妥善挑選後的混合,並以 CSS background 值的形式寫入。最快的路徑是:挑選漸層類型、以視覺化方式設定每個色標的顏色與位置、以與容器相同的尺寸預覽結果、複製 CSS,然後貼到樣式表中。此後,剩下的檢查就只有視覺協調性和無障礙——兩者在 Color Gradient Generator、palette generator 與對比檢查工具同時開啟的工作流程下,都會變得更容易。
如果你正在權衡不同選項,Get a Matching Color Palette from an Image in Illustrator 有更詳細的說明。
如果你正在權衡不同選項,Create Perfect Color Gradients in Canva with One Tool 有更詳細的說明。