Maojui

線性漸層 (Linear gradient) | CSS

2023-02-21

線性漸層

linear-gradient(箭頭方向, 開始顏色, 朝著箭頭逐漸變成甚麼顏色)

#0000ff #ff0000
To Top (0deg)
#0000ff #ff0000
To Top Right (45deg)
#ff0000 #0000ff
To Right (90deg)
1
2
3
4
5
6
7
background-image: linear-gradient(to top, #ff0000, #0000ff);
background-image: linear-gradient(to right, #ff0000, #0000ff);
background-image: linear-gradient(to bottom, #ff0000, #0000ff);
background-image: linear-gradient(to left, #ff0000, #0000ff);
background-image: linear-gradient(45deg, #ff0000, #0000ff);
background-image: linear-gradient(-30deg, #ff0000, #0000ff);
...

linear-gradient(箭頭方向, 開始顏色, 顏色2, 顏色3, … )

1
background-image: linear-gradient(to right, #ff2121, #ffb42a, #d3f100, #00d470, #007bfe, #3000d8, #9e00e2);