CSS 漸層顏色是在單一 background-image 值中,以色彩停駐點形式宣告的兩種以上顏色之間的平滑混合,每個停駐點會將一個顏色與 0% 到 100% 之間的位置配對,瀏覽器會自動在像素之間進行內插。完整的宣告式寫法會放在 linear-gradient() 或 radial-gradient() 之中,而渲染出來的輸出是純 CSS,而不是匯出的影像,這表示它能以任何元素大小清晰縮放,永遠不會出現像素化。兩個停駐點能呈現乾淨的雙色漸變,而三個或更多停駐點則可讓你在特定位置固定某個顏色,或建立多頻段光譜。線性漸層中的角度可控制方向(0deg 指向頂端、90deg 指向右側、180deg 指向底部),而放射狀漸層則從中心點以圓形向外混合。由於結果只是一個背景屬性,因此不需要任何影像、廠商前綴或建置步驟,同一段漸層程式碼在所有目前的瀏覽器中都能正常運作。手動輸入這些停駐點、位置和角度既麻煩又費時,這就是為什麼視覺化的 CSS 漸層產生器 能大幅加快工作速度,並在每次輸出時提供語法正確的乾淨程式碼。
線性 vs 放射狀:該使用哪一種漸層類型
線性漸層會沿著你所設定角度的直線進行平滑混合,因此色彩過渡具有明確的起點與終點。放射狀漸層則以圓形從中心點向外輻射,因此混合效果會呈現聚光燈、暈影或柔和光暈的視覺感受。兩者之間的選擇,取決於過渡在畫面上應該呈現的形狀,以及該形狀所傳達的訊息。
線性是首頁主視覺區塊、按�填色、卡片背景、進度條和區段分隔線的常見選擇,因為眼睛會將方向性的掃描視為刻意的設計。放射狀則更適合用於標題後方的聚光燈效果、大頭貼周圍的光暈、圓形徽章、藥丸形背景和照片疊加層,因為圓形的衰減效果在這些位置看起來相當自然。
如果你想要更深入的比較,線性 vs 放射狀 CSS 漸層一文會針對每種情況,搭配對應的程式碼範例做更詳細的說明。
CSS 漸層角度及其產生的方向
寫入 linear-gradient() 中的角度會旋轉漸層的軸線。零度指向上方,90 度指向右側,數值從該處開始順時針遞增。一旦記住三個參考點,其餘部分就很容易推論,下表涵蓋了你最常會用到的角度。
| 角度 | 漸層方向 |
|---|---|
| 0deg | 由下至上 |
| 45deg | 由左下至右上 |
| 90deg | 由左至右 |
| 135deg | 由左上至右下 |
| 180deg | 由上至下 |
| 270deg | 由右至左 |
色彩停駐點與位置的運作方式
每個漸層都是由色彩停駐點所定義。停駐點是一個顏色,寫在某個位置旁邊,而位置是沿著漸層軸線測量的 0% 到 100% 之間的百分比。瀏覽器會以平滑內插的方式填滿停駐點之間的空間,因此停駐點數量越多、彼此越靠近,混合形狀就能越精準地被控制。
像是在 0% 使用 #1e3a8a、在 100% 使用 #f59e0b 的雙停駐點漸層,會產生均勻的漸變,不會出現可見的色帶。第三個停駐點可讓你在特定位置鎖定一個顏色——例如在 50% 使用 #10b981——結果就會變成由深藍到綠再到琥珀色的混合,而非直接的深藍到琥珀色過渡。加上第四或第五個停駐點,就能建構出完整的多頻段光譜。
停駐點可以自由新增或移除,拖曳其位置滑�會即時更新 CSS。此工具會自動依位置重新排序停駐點,並將每個值限制在合法的 0–100% 範圍內,因此無論你編輯得多麼激烈,它所輸出的 CSS 在語法上都會是正確的,即使你�試將停駐點推到滑桿的任一端之外也一樣。
真實介面中的 CSS 漸層顏色
漸層出現的地方比大多數人想像的還要多。首頁主視覺區塊會將它們用作背景暈染,在不傳送任何影像素材的情況下營造氛圍。按鈕、卡片和藥丸形元素會把它們作為填色,以增添深度與觸感。進度條和載入狀態會用它們來一眼傳達方向感。影像疊加層會用它們將照片調暗到恰到好處,讓白色文字在上方仍保持可讀性。:hover 狀態會用它們為互動元素提供明確的按下回饋。裝飾性的分隔線與區段分隔會用它們在內容區塊之間作為視覺標點。
由於結果只是一個 background 屬性,而不是下載的 PNG,因此漸層不會為頁面增加任何網路請求,而且會依據裝置螢幕密度的不同自然地銳利化或柔化。這使得它們成為以低成本將平淡的介面提升為具有設計感的介面的方法,既不增加建置複雜度,也不需要外部素材,同一段程式碼片段可在任何樣式表或元件檔案中運作。
如何以視覺化方式建立 CSS 漸層顏色
- 選擇漸層類型——方向性漸變請選 Linear,中心向外混合請選 Radial。
- 設定每個色彩停駐點的顏色,並將其位置滑桿從 0% 拖曳到 100%;視需要新增或移除停駐點。
- 針對線性漸層調整角度滑桿,以旋轉混合方向(0deg 向上、90deg 向右、180deg 向下)。
- 在你調整停駐點、顏色和角度時,即時預覽會同步更新,因此在撰寫任何程式碼之前,即可看見渲染後的結果。
- 點擊 Copy CSS 即可取得可直接貼上的背景宣告,並直接貼到你的樣式表或元件檔案中。
若想超越最初的想法,可點擊 Randomize 來產生你可能不會手動挑選的組合,接著再從中精煉出最接近你需求的選項。所有處理都在你的瀏覽器本機執行,因此你嘗試的漸層設計永遠不會上傳到伺服器,你可以反覆迭代任意次數,完全不需要網路往返。
停駐點數量與其視覺效果
色彩停駐點的數量對混合形狀的影響,與顏色本身的影響一樣大。下表勾勒出兩者之間的關係,讓你能刻意挑選停駐點數量;確切的百分比會由產生器依據你所選的顏色和相鄰停駐點間想要的對比來決定。
| 停駐點數量 | 典型效果 |
|---|---|
| 2 | 乾淨的雙色漸變,無可見色帶 |
| 3 | 在中點固定或轉折一個顏色,常用於帶有品牌色調的混合 |
| 4 | 雙頻段混合,在外側顏色之間具有明顯的中間色肩部 |
| 5 個以上 | 完整的多頻段光譜 |
對大多數 UI 工作來說,兩個或三個停駐點是實際上的上限。停駐點再多,結果通常會與疊在其上文字的可讀性相互牴觸,因為每多一個頻段就會引入一個對比點,讓眼睛必須先解析它才能閱讀前景內容。
有效的 CSS 漸層�色組合
有些配對會反覆出現,因為它們的色彩關係確實能發揮作用。互補色——色輪上相對的顏色——能產生高能量的混合,適合用於首頁主視覺區塊和行動呼籲按鈕。類似色——色輪上的鄰近色——能產生平靜、低對比的暈染,適合用於長篇內容的背景。單色配對——相同色相、不同明度——能產生細緻的深度漸層,看起來幾乎就像柔和的陰影,適用於卡片、藥丸形元素和側邊欄。
除了配對之外,停駐點的順序也會改變漸層的視覺感受。由暗到亮的混合,在卡片上看起來就像頂端的高光;由亮到暗的混合,在按鈕上看起來就像底部的份量。在最末端重複起始顏色(例如紅、橘、黃、橘、紅)能產生對稱的緞帶效果,適合用於標題和進度條,因為眼睛會在兩端都落在熟悉的錨點上。
如果你想在開始挑選停駐點之前先取得配對的調色盤,配色產生器可以從一個基準顏色為你提供互補色、類似色或三等分的組合,讓你不必猜測十六進位值,也不必將每個顏色丟進轉換器,就能直接套用到漸層中。
如果你正在權衡各種選項,CSS cubic-bezier() 中的 y1 或 y2 可以超出 0–1 的範圍嗎?對此做了詳細說明。