[Back To Basic] CSS Gradients

Gradient 可以讓N種顏色之間的過渡更和緩，漸層的概念。

CSS 有二種 gradients

• linear gradient

語法: background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

• 方向: 上到下(預設) e.g. to bottom, to bottom right, to right ...
• 顏色1
• 顏色2
• ...

*. 方向也可用角度取代

e.g.

background-image: linear-gradient(55deg, red, yellow);

*. 也可配合透明色使用

• radial gradient

語法: background-image: radial-gradient(direction, color-stop1, color-stop2, ...);

• 形狀大小位置: 橢圓形 + 平均間隔(預設)
• 顏色1
• 顏色2
• ...

source code