CSS Gradient - 線上產生線性漸變背景，提供 5 種漸變模式與可客製化顏色與色段區間並產生 CSS 程式碼

2 分鐘閱讀

CSS Gradient 是一個能夠幫助你快速建立漸變圖片背景的一個免費線上工具。它除了能夠產生漸變圖片背景的 CSS 碼之外，當中還有不斷提供許多與顏色相關的小功能，且陸陸續續新增當中，因此非常推薦給前端設計師用來挑選顏色或產生圖片的一個網站。

CSS Gradient 主要是產生漸變背景的 CSS 程式碼，可以讓你產生漸變的背景後貼至網站或專案中，呈現你想要的漸變效果。若你是想要產生實際圖片背景，可以參考之前介紹過的「Cool Backgrounds」，那就能夠替你產生擁有漸變效果的背景圖片。

這個網站目前提供了 5 種不同的線性模式，根據你的喜好可以產生各種不同象限的效果。並且，它還能指定漸變的方向為 Linear 或是 Radial，更可以調整散射的角度，可見他的靈活性非常高，絕對能夠滿足需要客製化設計的使用者。

網站名稱：CSS Gradient — Generator, Maker, and Background
網站網址：https://cssgradient.io/

CSS Gradient 簡介教學

Step 1

進入首頁後，在畫面中最上方的背景就是你的漸變調整的實際效果，能夠讓你看到即時調整的結果：

Step 2

在下方你可以透過調色盤去選取你想要的顏色，或者如果你知道色碼，也可以透過輸入色碼的方式來選取顏色。此外你還可以調整顏色的透明度，以及選擇要線性或者散射的漸變方式，更還能更改散射的角度。最後，還可以上傳圖片去自動檢測圖片的顏色並套用，功能可謂非常多：

Step 3

CSS Gradient.io 有一個非常棒的功能，你可以在上方的那條漸變色條中間點選，就可以增加一個漸變色的段落，基本上是可以無限增加的，並且可以隨時在右下方點選 X 去移除任何一個段落：

Step 4

目前它有提供 5 種漸變樣式，你可以挑選喜歡的樣式再去調整你的顏色，與漸變的模式：

Step 5

完成你的設定後，就可以在下方複製 CSS 程式碼，貼至你的專案中就可以顯示漸變色的背景。此外，你可以在方框右上方勾選「Max Compatibility」，就可以開啟 CSS 的相容性，這樣你的漸變 CSS 效果就能顯示在較舊的瀏覽器當中：

CSS Gradient 評價推薦優點