漂亮的渐变

看完文章觉得自己能力还不足想要更多的UI设计学习交流的都可以加一下我的学习交流群，平常会给大家分享一下UI设计的教程和一些文章，希望能帮助大家更好的学习UI设计，晚上8点还会分享UI设计直播去学习甲流就请大家热情一点哦！

群：514985251，进群多多交流学习咨询。

经验丰富的同学也许一眼就看出来了，我当时稍微思考了一下，然后发觉这种渐变甚是熟悉。

这不就是拾色器上面的渐变嘛？

拾色器

相似的渐变还有这两种，是不是都十分的好看？

另外两种

既然看到到了拾色器上有这种渐变，那么实现原理也就十分简单了。

首先我们创建一个纯黑图层，作为背景

纯黑背景

然后再新建一个图层，填充黑色（#000000），并添加渐变叠加，设置混合模式为滤色，线性180度，颜色由纯黑到纯蓝

添加蓝色渐变

接着再新建一个图层，填充黑色（#000000），并添加渐变叠加，设置混合模式为滤色，线性90度，颜色由纯黑到纯绿

添加绿色渐变

接着再新建一个图层，填充纯红（#ff0000）

最后把除黑色背景之外的图层的图层混合模式都设置为滤色便大功告成~

设置为滤色

最终效果如下。

设计稿大约是这样

设计稿

另外demo我要已经写好了~，随便截几张图大家感受下~是不是很漂亮？