相信很多朋友都用过WebgGadients(webgradients.com)，里面的渐变色很漂亮，但用的人太多了，就没有了新意。如果用腻了或者觉得不够用了，但就是喜欢这种风格，怎么办？没关系，GradientsGuru给出了答案。

GradientsGuru的特色是支持上传图片与渐变色进行混合模式(16种)，透明度可调。渐变色也漂亮，分为浅色和深色渐变。可以修改渐变色方向，同时支持复制CSS代码。

WebgGadients是一个适用于专业设计师和开发人员的渐变神器

网址：http://gradientsguru.com/

相比WebgGadients，它的渐变色功能更强大，支持上传图片进行混合模式做成双色调，渐变色数量上也略多，并且可以调节渐变色角度。但有一个很明显的缺点，就是渐变色不能直接下载位图图片，需要先上传一张图片，然后将混合模式的不透明度调为0，再下载渐变色(渐变色的尺寸就是上传图片的尺寸)，还有就是没有插件。

进入首页，就给人少男少女时尚的气息，请自觉忽略logo。

点击Strong Gradients或者Cool Gradients按钮，切换深浅渐变色，整体功能如下

除了使用渐变色的两个色值(右下角)，核心特点是上传图片混合模式

先来看看混合模式的效果

原图 

效果图

上传图片的样张：https://pixabay.com/zh/photos/child-girl-winter-fashion-hat-5943325/

使用过程如下(两步完成)

第一步，点击左下角图标上传图片上传图片后 

第二步，选择自己喜欢的混合模式

调整后如果觉得OK，就点击DOWNLOAD IMAGE下载图片

下载图片 

如果只想要渐变色，则需要将不透明度调为0，此时下载的渐变色图片尺寸与上传图片的尺寸相同，然后点击DOWNLOAD IMAGE下载图片。 

下载的渐变色图片，效果如下 

点击右上角的图标，复制出的CSS代码效果如下。还贴心的加上了Chrome/Safari和Firefox兼容模式。

background: #ffedd4; background: -moz-linear-gradient(-63deg,  #ffedd4 0%,#ffb9a2 100%); background: -webkit-linear-gradient(-63deg,  #ffedd4 0%,#ffb9a2 100%); background: linear-gradient(-63deg,  #ffedd4 0%,#ffb9a2 100%); 

所有渐变色如下(暂时198个) 

@本文狮有设计原创内容，禁止转载 

相关链接

出色的渐变神器，让你爱上它

没有好的配色灵感? 配色神器第一期(色彩搭配篇)，助你瞬间成为配色大神

Powered by Froala Editor