使用 CSS 做出顏色漸層效果:linear-gradient()

想要用 css 做出顏色的漸層效果可以使用 css function 中的 linear-gradient()

linear-gradient() 的用法

舉例來說我們現在有一個 class name 為 to-right-top 的 div 容器

<div class=”to-right-top”>
 </div>

在 css 中設定好這個容器的長寬，就可以把 linear-gradient() 放入 background 屬性裡面

.to-right-top {
 margin: 20px;
 height: 20vh;
 width: 20vw;
 background: linear-gradient(
 to right top,
 rgba(174, 216, 226, 0.8),
 rgba(43, 59, 95, 0.8)
 );
}

在 linear-gradient() 中，第一個值 to，指的是漸層顏色變化的方向，上方這個例子中 to right top 意思就是漸層的變化方向由左下方(left bottom) to 右上方(right top)。

漸層主要的方向可以從 top、bottom、right、left、 right top 、 right bottom、left top、left bottom 這幾個方向去做變化。

第二個值就是你想要使用的漸層的顏色，請記得一定要至少放入兩個顏色，才能達到做漸層的效果，尤其以相近的顏色效果為佳。

不同方向做出的漸層效果大致如上