今天发现一个有意思的网站，专门用css写出各种各样的渐变色的可卡站，可复制CSS样式，也可下载jpg图片。

像这样的、那样的、还有这样的渐变都是CSS实现的：

CSS多姿多彩的渐变色，前端还需要PS吗？-QUI-Notes

深挖一下

我保持怀疑的态度复制了CSS，扔到了一个宽高一定的盒子里面，竟然真的实现了！ 

background: -webkit-gradient(linear, 100% 0, 0 0, from(#FFB7B7), to(#727272));
background: -webkit-linear-gradient(180deg, #FFB7B7 0%, #727272 100%);
background: -moz-linear-gradient(180deg, #FFB7B7 0%, #727272 100%);
background: -o-linear-gradient(180deg, #FFB7B7 0%, #727272 100%);
background: linear-gradient(180deg, #FFB7B7 0%, #727272 100%), 
		  radial-gradient(60.91% 100% at 50% 0%, #FFD1D1 0%, #260000 100%), 
		  linear-gradient(238.72deg, #FFDDDD 0%, #720066 100%), 
		  linear-gradient(127.43deg, #00FFFF 0%, #FF4444 100%), 
		  radial-gradient(100.22% 100% at 70.57% 0%, #FF0000 0%, #00FFE0 100%), 
		  linear-gradient(127.43deg, #B7D500 0%, #3300FF 100%);
background-blend-mode: screen, overlay, hard-light, color-burn, color-dodge, normal;

CSS多姿多彩的渐变色，前端还需要PS吗？-QUI-Notes

耐心看css渐变背景，我们一层层的剖析一下：

首先我去掉了“混合模式”：background-blend-mode，然后图片变成了下图这样，

CSS多姿多彩的渐变色，前端还需要PS吗？-QUI-Notes

灰不拉几的，就一个双色渐变，难道说所有的效果都是混合模式呈现的？ 

background-blend-mode: screen, overlay, hard-light, color-burn, color-dodge, normal;

它出现了6个值：

  • screen：滤色模式
  • overlay：叠加模式
  • hard-light：强光模式
  • color-burn：颜色加深
  • color-dodge：颜色减淡
  • normal：正常

它为什么有个值？WHAT？去各种教程上学，都是一个值？这样图片混合到底发生了什么事情？OMG，淡定，我觉得难不住聪明的我！

猜想一番

多测试了几个渐变效果样式，细心的我发现了一个规律：有多少个渐变层就有多少个混合模式！它们每一层都是对应的。

CSS多姿多彩的渐变色，前端还需要PS吗？-QUI-Notes

例如样式二：第一层中心渐变生效的是颜色减淡
                   第二层饼庄渐变执行正常模式

然后去查了混合模式的相关文章（度娘），发现还可以省略：渐变层多的话，混合模式对应值不够，会从第一个重复一遍，直到所有渐变层都有对应的混合模式值。

这样晓得了，对渐变和混合模式的理解有加深了一些，原来css也可以像PS一样，一层层的叠加混合模式，真是太神奇了！不得不服老外开发者的学习技能，我们自己人总是“能用”，解决工作问题就行，人家就是玩的花！

验证推断

最后，像剥洋葱一样，把颜色混合模式，从后面一层，一层地去掉，拨开看看效果：

CSS多姿多彩的渐变色，前端还需要PS吗？-QUI-Notes

对渐变了解不多的，推荐看我这篇《css关于gradient渐变的总结笔记》！
对混合模式不了解的，推荐看我写的另一篇《background-blend-mode：CSS实现混合模式叠加——类似Ps图片滤镜效果》！

渐变效果色卡网站：https://gradienta.io/