現在一些新的網路服務都蠻喜歡使用漸層顏色作為背景，一來讓背景不那麼單調，再者是 CSS3 之後加入 linear-gradient 參數表示漸變色背景圖，除了顏色外還能控制漸層的角度等等，幾乎只要幾個控制參數就能做到，在應用上更為靈活。如果你想要在網站開發或部落格使用漸層背景，之前我推薦的「Unique Gradient Generator 美麗的網頁毛玻璃模糊背景產生器」是一個方法，另外本文要介紹的 WebGradients 就更厲害一些。
WebGradients 是一個收錄 180 個線性漸變背景免費集合的網站，你可以從這裡挑選網站背景，利用產生的 CSS 語法將它快速套用到你網站的任何部分。WebGradients 讓使用者能直接點擊後預覽背景效果，一鍵產生 CSS 語法或下載 PNG 圖片格式。
此外，WebGradients 還提供免費的 Photoshop 和 Sketch 下載！如果需要的話，你能從網站上找到購買鏈結，自由贊助金額，亦可免費取得這兩種素材組合包。
網站名稱：WebGradients
網站鏈結：https://webgradients.com/
漸層背景產生器使用教學STEP 1
開啟 WebGradients 網站後，往下拖曳就能找到收錄的所有 180 種線性漸變背景顏色，網站右上角有兩個鏈結，分別是 .Sketch 和 .Psd 兩種不同圖片格式的線上購買鏈結。
漸層背景產生器使用教學STEP 2
WebGradients 收錄的每個背景顏色都有名稱、色碼及預覽圖。
點擊預覽後會直接放大、套用到你目前的網頁背景，就能看到該漸層顏色的變化效果。
漸層背景產生器使用教學STEP 3
點擊背景圖右上角的「下載」圖示可以取得背景圖的 PNG 格式，不過更方便的方式是點擊右下角的「Copy CSS」，WebGradients 會自動產生漸層圖案的 CSS 樣式並複製到剪貼簿，例如我取得的某一段語法看起來像這樣：
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);只要把它加入你網站或應用程式的 CSS 樣式表就能輕鬆套用，非常簡單。
漸層背景產生器使用教學STEP 4
如果你想獲取這些漸層背景的 Sketch 或 Photoshop 原始圖檔，點擊網站首頁右上角的下載鏈結就能找到，會連接到 Gumroad 商店，可以自由填入購買價格（輸入 $0 元免費下載），若喜歡或覺得對你來說非常有幫助不妨付費贊助一下。
