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 语法，对于想要产生渐层背景来说会非常有用。

值得一试的三个理由：

1. 将各种渐层背景产生器整合在单一网页中
2. 套用渐层色只需加入一段 CSS3 程序码
3. 开发者另一服务 Cool Backgrounds 也很好用