css 渐变色_八款渐变色生成工具，UI萌新设计师再也不用担心配色啦

各种配色乱用，风格杂乱，素材堆砌

这些都无非是缺乏美感的设计师一些通病

那么高级UI设计师们那些或温柔、或大胆的渐变色都是怎么做出来的呢？

原来，是有小秘招的！

下面，就给大家介绍几款好用的渐变色生成工具：

第一款 Cool Hue

介绍：Cool Hue是一个托管在Github上的颜色代码分享网站，由UVdesk分享，挑选最流行和最常用的渐变色代码。

优势：设计师们可以自由选择想要的渐变色CSS代码应用到自己的网站设计项目。

网址：

https://webkul.github.io/coolhue/

第二款 CSS Gradient

介绍：CSS Gradient提供有很多的参数调整工具以及数字选项，你可以选择最多三种颜色并创建自定义的CSS渐变。

优势：参数调整工具易于使用，即使是颜色经验很少的人也可以很快弄清楚如何创建可用的渐变。此外，还有几种不同风格的预制渐变作为灵感。此工具的最佳功能之一可能是你可以对所创建渐变的每个细节的高级控制。

网址：

https://cssgradient.io/

第三款 Gradient Cards

介绍：Gradient Cards是一个精心挑选和策划的渐变色彩合集。

优势：你可以直接导出现有的渐变色彩的CSS代码，也可以基于某些特定的渐变配色方案进行调整，以契合自己的需求。

网址：

https://gradients.cssgears.com/

第四款 UI Gradients

介绍：UI Gradients是一个全屏渐变生成器。看到全尺寸颜色渐变的好处是，你可以真实地看到它们运用到你实际设计项目的外观。

优势：UI Gradients包含大量预制渐变选项。 你可以浏览预设的渐变集合或按颜色搜索。 选择范围从两种颜色到三种颜色，带有线性图案。不喜欢你所看到的预设选项？你还可以将渐变细节添加到项目中的gradients.json文件中，并提交获得相应的请求结果。

网址：

https://uigradients.com/#VisionsofGrandeur

第五款 Gradient Hunt

介绍：Gradient Hunt是一个开放的渐变色彩灵感平台。

优势：这里的每一套渐变色都是由设计师和爱好者自行上传的，并且按照特征进行了分类，你可以按需取用。

网址：

https://gradienthunt.com/

第六款 CSSmatic

介绍：CSSmatic是一个简单的渐变生成器，具有易于操作的按钮，可帮助你自定义颜色选择，停止和旋转。用户可以通过它来创建线性或径向渐变。

优势：从一个简单的预设开始，这里提供了一些很好的单色选项，并可以通过调整直到你得到正确的渐变。 然后复制代码，你就可以开始了。

网址：

https://www.cssmatic.com/gradient-generator

第七款 GradPad

介绍：Gradpad是一个可以帮你生成渐变CSS代码的工具。

优势：你可以自己设置渐变色彩、透明度、位置和角度，还可以查看流行的热门渐变色彩，直接使用现成的代码，对于前端开发非常实用了。

网址：

http://ourownthing.co.uk/gradpad.html

第八款 Colorspark

介绍：Colorspark这款工具也同样的非常的轻量级，它将功能收缩到一个非常简略精确的范畴：生成单色和渐变色，输出CSS样式。

优势：如果你需要的是功能单一且明确的色彩生成工具，那么就是它了。

网址：

https://colorspark.app/

渐变趋势在近两年的运用格外频繁，很多平涂式的底色，改用渐变方式，瞬间就能提升几个档次，也更加醒目耀眼，所以不论是UI新手还是日常生活中需要运用到设计技巧的亲们，都是时候get一下咯~

在这里我相信有很多想要学习UI的小伙伴，我自己是一名从事了多年平面和UI这方面工作的设计师，辞职目前在做自己的私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的学习干货，从最基础到实战都有整理，送给每一位小伙伴，想要获取的可以关注我并在后台私信我：学习，即可免费获取。

伸手党勿扰！