Gradient Backgrounds 一站式漸層背景產生器，收錄各種服務方便切換

大家都知道現在漸層背景可直接使用 CSS 3 寫出來，終於不用辛苦製作背景圖，好處是一段程式碼就能解決，但你可能不一定知道怎麼寫，還好網路上已經有不少背景產生器，透過可視化介面調整效果後快速轉為程式碼，非常方便！例如 WebGradients、CoolHue 或 ColorSpark 都很好用，如果你需要更複雜一點的背景圖案，Caself 和 Subtle Patterns 也很適合。

本文要推薦的「Gradient Backgrounds」是幫助使用者產生漸層背景的線上工具，不過比較偏向於整合各種產生器，讓我們可以在一頁中快速選用，Gradient Backgrounds 收錄的服務包括：uiGradients、Grabient、Gradient Hunt、EggGradients、WebGradients、CoolHue、GradientButtons 和 Colorful，可在單一網頁裡直接切換選擇。

Gradient Backgrounds 的點子讓我想到之前曾介紹過一個整合多個免費圖庫在單一網頁中的免費服務，而這個項目則融合 CSS Gradient 和背景圖案工具 Cool Backgrounds，如果剛好在開發專案時會用到漸層色背景，可到這網站來玩玩看。

網站名稱：Gradient Backgrounds
網站鏈結：https://cssgradient.io/gradient-backgrounds/

使用教學

STEP 1

其實 Gradient Backgrounds 非常簡單，應該不用多做教學了，收錄的漸層背景產生器全部列在左側，例如 Grabient。

或是 uiGradients，有幾個是免費資源網路社群曾經介紹過的，總之在這網站上只要點選左側選單就能在右側快速載入使用，非常方便。

也有像是 Gradient Hunt 這類專門收集漸層色塊的網站。

還有 WebGradients 我認為相當好用，我曾寫過一篇專文「WebGradients 收錄 180 種漸層背景免費下載，一鍵產生 CSS 3 語法」介紹，如果想對這個工具有更多了解可以參考文章。

前面有提到 CoolHue，我也曾經推薦過，這是一個背景色的色卡工具，詳情及使用教學可參考：CoolHue 最酷的漸層色背景色卡產生器，快速產生背景 CSS3 語法，對於想要產生漸層背景來說會非常有用。