CSS 漸層是一個 CSS3 background-image 值,它透過空間將兩種或更多顏色混合在一起,使用 linear-gradient() 或 radial-gradient() 函式定義,由沿著軸線放置的色標組成。若要在網頁上產生漸層顏色,你可以定義類型(線性或放射性),設定至少兩個顏色標記的 hex、rgb 或 hsl 值,選擇性地設定角度或位置,瀏覽器就會將平滑的混合結果以 background-image 呈現。不需手動調整語法,最快建立漸層的方式是使用 Color Gradient Generator,這是一個視覺化工具,讓你挑選顏色、拖曳標記位置、改變角度,並且一鍵複製可直接上線使用的 CSS 宣告。
漸層現在已經內建於 CSS 規格本身,而不被視為圖片資源,這就是為什麼它們在任何螢幕解析度下都能清晰地縮放、平滑地動畫呈現,並且與扁平顏色的 JPEG 相比,幾乎不會為頁面增加任何負擔。它們出現在各種地方——主視覺區、行動呼籲按鈕、卡片背景、文字遮罩、圖表,甚至是正文後方細微的背景填色。由於產生器會輸出實際的 CSS 規則,你可以直接將它放入樣式表、style 屬性、Tailwind 設定檔或 styled-component 樣板中,立刻看到渲染結果。
線性 vs 放射性漸層:選擇正確的類型
在你開始點擊之前,第一個決策是決定你的漸層應該沿著一條直線流動,還是從一個點向外輻射。兩種類型使用相同的色標語法,但它們的幾何結構和視覺感受差異極大。
| 類型 | 形狀 | 方向控制 | 常見用途 |
|---|---|---|---|
| 線性 (Linear) | 沿著軸線的筆直漸變 | 以度數表示的角度(0–360) | 主視覺背景、按鈕 hover、分隔區塊 |
| 放射性 (Radial) | 由中心向外擴散的圓形或橢圓形混合 | 位置關鍵字或距離中心的 % | 聚光燈、暗角、發光效果、圖片疊加 |
當你需要方向感與動態感時,選擇線性——從品牌色流白色調的主視覺、hover 時動畫的底線,或淡出為透明的側邊欄。當你需要深度或焦點感時,選擇放射性——標題後方柔和的聚光燈、照片邊緣暗化的暗角,或懸浮卡片下方的發光。
逐步產生漸層顏色
Color Gradient Generator 採用與你手寫時相同的工作流程:選擇類型、設定顏色,然後微調標記與角度,直到視覺符合需求。以下是完整的操作過程。
- 開啟 Color Gradient Generator,並從控制面板中選擇線性 (Linear) 或放射性 (Radial) 作為漸層類型。
- 點擊第一個顏色色塊,使用選色器(或輸入 hex 值)設定起始顏色,接著對第二個色塊重複同樣動作以設定結束顏色。
- 對於線性漸層,拖曳角度控制點或輸入度數值來旋轉漸變方向。常見的值包括 0deg(由下到上)、90deg(由左到右),以及 180deg(由上到下)。
- 使用「Add stop」按鈕加入更多顏色標記,以建立多段漸層,例如日出或極光效果,然後拖曳每個標記的位置滑桿,微調轉場開始與結束的位置。
- 使用每個標記的刪除控制項移除不再需要的標記——預覽會立即縮回剩餘的顏色。
- 調整時即時觀察預覽更新。如果某個標記過於突兀,可將其位置推過前後標記,以在原本平滑的混合中建立一道銳利的色帶。
- 點擊Copy CSS 複製完整的 background-image 宣告,然後貼到你的樣式表、內聯樣式或元件檔案中。
理解色標與位置
色標是任何漸層的核心。每個標記將一個顏色與一個以漸層起始邊為基準的百分比位置配對:0% 是最起始的位置,100% 是最末端的位置,介於兩者之間的任何數值就是顏色轉換發生的位置。MDN 上的 CSS Color Module Level 3 規格將此描述為每個漸層函式的「color-stops」參數。
如果你將兩個標記放在相同的百分比,就會在兩種顏色之間建立一條銳利的分界線,而不是平滑混合。這個技巧是條紋背景、圖片遮罩疊加和雙色調效果的基礎。將標記拉近會使轉場更為銳利;將標記拉遠則會使其更為柔和。加入第三或第四個標記——例如從紫色到粉色再到橙色——就能創造出 Instagram 上那種著名的多色調夕陽效果。
Color Gradient Generator 直接呈現這項機制:每個標記都有位置滑桿和顏色色塊,你可以閱讀產生的 CSS,精確看到自己設定的數值。一旦理解標記的運作,網路上看到的每個 CSS 漸層——從 Apple 風格的產品頁到 Stripe 首頁——都會變成你能自行重現的對象。
用白話解釋線性漸層角度
線性漸層以一個角度為核心,該角度從向上方向起以順時針測量。規格定義 0deg 為「to top」、90deg 為「to right」、180deg 為「to bottom」,而 270deg 為「to left」。一個常見的錯誤是認為 0deg 像數學中的指北針角度一樣指向左或右——在 CSS 中它是直接指向上方。
| 角度 | 方向 | 視覺效果 |
|---|---|---|
| 0deg | 由下 → 上 | 頂部較淺,類似天空 |
| 45deg | 由左下 → 右上 | 對角線掃過,動態感十足 |
| 90deg | 由左 → 右 | 水平漸變,常見於按鈕 |
| 135deg | 由左上 → 右下 | 呈現為向下對角 |
| 180deg | 由上 → 下 | 底部較淺,頁面漸隱感 |
如果你偏好較易閱讀的 CSS,也可以使用 to right、to bottom right 等關鍵字捷徑來取代度數。兩種寫法會產生相同的結果;產生器直接顯示度數,讓你能自由旋轉,不必去思考哪個關鍵字對應哪個方向。
確保頂部文字保持可讀性
漸層終究只是背景,但一旦在它上面放置文字,可讀性就成為必須正視的問題。同一段文字在純色深色背景上可能完全清晰,但在由暗到亮的漸層上卻可能無法閱讀——一半的詞落在高對比的區塊,另一半則消失不見。務必使用 Color Contrast Checker,將產生的配色方案對照漸層中最淺與最深的區塊進行檢查,並至少達到 WCAG AA 標準,以符合內文的可讀性要求。
將漸層與其他 CSS 工具結合
漸層可使用逗號與其他 CSS 圖片值乾淨地疊加。一個典型的主視覺可能是 background-image: linear-gradient(...), url('pattern.svg');,將漸層置於圖案之上,或是兩個堆疊的線性漸層來製作交叉淡入淡出。對於可重複的條紋與網格混合,技巧與建立單一漸層完全相同——只需堆疊宣告,讓 CSS 自行合成。
如果你需要的是精確的同色系配色,而不是漸層,可以使用 Color Palette Generator,從任何基礎顏色中萃取互補色、類似色與三等分和諧配色。若只是臨時探索,使用 Random Color Generator 可即時產生 hex、rgb 與 hsl 值,並一鍵複製到剪貼簿。若你在工作過程中需要快速轉換——例如將從漸層預覽中挑選的 hex 轉換成 JavaScript 變數用的 rgb——RGB to HEX 工具能雙向轉換,並具備即時色塊顯示。
常見版型的複製貼上範例
一旦你使用 Color Gradient Generator 完成漸層設計,它產生的 CSS 通常符合下列三種模式之一。對於全頁主視覺,可將漸層套用於 body 或主視覺區塊,並加上 background-attachment: fixed,使它在頁面捲動時保持固定。對於按鈕,可將漸層套用於 background-image(而非 background-color),並在 :hover 狀態下疊加一個略深的漸層,創造深度感而不需使用圖片。對於區塊分隔線,一個極薄的漸層帶——在 4px 高的區塊上配置兩到三個標記——就能提供清晰的視覺斷點,且不增加任何標記負擔。
圖表、進度條和骨架載入佔位元素同理:與其載入兩種扁平顏色,使用漸層能讓這些元件顯得精心設計,而非套版樣板。由於一切皆以單一 CSS 規則產生,日後你可以自由編輯——變更某個標記的 hex、更換角度,或加入第三個顏色——而不會破壞其餘的版面配置。
另請參閱:如何將 RGB 轉換為 HEX:簡明實用指南。
延伸閱讀:在 Illustrator 中從任何圖片建立自訂調色盤。
延伸閱讀:一鍵為設計專案產生隨機顏色。