透明渐变效果图
源码
<style>
#grad1 {
<!--height: 100px;-->
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
<div id="grad1"></div>
不喜欢这个颜色的话,还有(
渐变灰蓝
)
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(16,33,106,1));
测试时请将被我注释掉的高恢复,自己使用的话,请随意设置你需要的高
使用角度:
如果你想要在渐变的方向上做更多的控制,你可以定义一个角度,而不用预定义方向(to bottom、to top、to right、to left、to bottom right,等等)
rgba() 函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明。
对角渐变效果图
源码
<style>
#grad2 {
<!--height: 100px;-->
background-image: linear-gradient(80deg, #20B2AA, #1C86EE);
}
</style>
<div id="grad2" style="text-align:center;"></div>
附赠
参考详情教程
:https://www.runoob.com/css3/css3-gradients.html
渐变色设计思想
:https://www.cnblogs.com/GarsonZhang/p/10516700.html
万能的调色板
:https://www.114la.com/other/rgb.htm
推荐另一个博主的CSDN博文(纯萌新可以直接copy):https://blog.csdn.net/qq_42850073/article/details/90712034