网页渐层背景产生器，选择颜色即时预览建立CSS 原始码

现在很常在网路服务或网站上看到渐层背景应用，记得早期都必须使用图片堆叠出来，不过后来已经可以写入CSS样式，只要指定颜色代码和呈现方式即可。虽然知道有这功能，但要立即写出来好像也不是那么容易，还好有网站可以参考，例如Gradient Backgrounds 收录各种渐层背景产生器的一站式工具，简单一点还有ColorSpark、CoolHue这类渐层色组合产生器，可快速建立CSS3语法，复制到网站就能套用。

本文要介绍的「Blend」是一款让使用者建立、自订CSS3渐层背景的线上工具，选择两种颜色，点选Let's Blend!将渐层效果直接预览显示于网站背景。Blend还能控制渐层角度、线性渐层（Linear Gradients）或径向渐层（Radial Gradients），最终产生对应的程式码。

如果你在开发网站或网路服务时正好需要渐层背景，不妨打开Blend 网站试试看，就能很快速很简单地解决背景颜色需求。

使用教学

STEP 1

开启Blend 网站，从左右两边设定一下渐层的颜色，点选中间的Let's Blend! 混合。

STEP 2

混合后直接从Blend 背景预览效果，看看是不是符合自己的期待。

STEP 3

右上角可以切换渐层模式，例如线性渐层或径向渐层，点选线性渐层时还能调整渐层的角度数据，调整时背景预览会即时更新。

STEP 4

最后，点选右上角按钮就能产生对应的CSS 程式码啰！将它加入网站的样式表，就能看到渐层背景效果出现在网页中。

值得一试的三个理由：

1. 设定两种颜色，直接于网页中预览渐层背景效果
2. 可选择线性渐层或径向渐层，可设定渐层角度
3. 产生CSS 原始码贴到网页样式表就能套用

1.欢迎大家在评论区评论

3.每天为您分享有价值的信息

同时希望大家多多转发分享给更多的朋友哦！

閱讀更多 天時 的文章

關鍵字: 渐层 颜色代码 技术