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

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

CSS多姿多彩的渐变色,前端还需要PS吗?-Qui-Note

深挖一下

我保持怀疑的态度复制了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-Note

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

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

CSS多姿多彩的渐变色,前端还需要PS吗?-Qui-Note

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

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-Note

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

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

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

验证推断

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

CSS多姿多彩的渐变色,前端还需要PS吗?-Qui-Note

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

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