html中div背景顏色漸變(透明 對角 附贈顏色查詢對照表)

透明漸變效果圖

源碼

<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