html颜色渐变配色方案,WebGradients – 提供180种渐变配色灵感的网站

WebGradients – 提供180种渐变配色灵感的网站

2月 20, 2017

发表于: 设计工具.

评论

Sponsor

今天和大家分享拥有180种渐变配色方案的网站：Web Gradients，这和我们上次分享的 UIgradients 网站查似，但此网站特色不仅提供漂亮的渐变配色，而且还有更多格式选择，比如 PSD, Sketch, PNG 以及可直接复制成一段 CSS 渐变代码，如此一来，设计师们就可以很方便的使用这个配色方案了。

打开网站我们就能直接看到 N 种配色展现在首页，只需要点击其中一个，就会显示全屏渐变。使用方法也非常简单,直接下载 Sketch/PSD 或复制十六进制颜色编码即可！

CSS 样式库的使用

除了直接 copy 一个 CSS代码外，我们可还以下载整个 CSS 样式库，方便在项目上直接调用。首先我们下载这个 CSS 库：https://github.com/itmeo/webgradients

STEP 1: 引入 CSS 文件

...

STEP 2: 给元素加入 class 即可，class 名称就是渐变色的名，比如007 Sunny Morning 对应的 class=”sunny-morning”

...

PS: 关于在设计稿使用渐变，小编是直接用 QQ 截图(一次截取多个配色)到文档里，然后直接吸色，以便快速做比较配色方案，这样就不需要切的窗口这么麻烦了>_<

渐变配色在一些 UI 设计上已经流行，你尝试了吗？如果你不太会用渐变色彩，建议使用此站，同时我们会将 WebGradients 加入到设计导航的配色栏目(目前已经有20+精选配色工具，并适合不同场合使用，推荐试用哦)

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

{ 发表评论 }

姓 名 (必填)

邮 件 (必填)

网 站