CSS 漸層產生器

運作方式

漸層在 CSS 中寫成單一宣告，其語法容易記錯，特別是角度慣例與色彩停駐點的位置。邊調整邊看結果，比重新載入頁面來檢查更快。

角度慣例會讓人栽跟斗

在 CSS 中，0 度指向上方，角度順時針增加，因此 90 度是由左到右，180 度是由上到下。這與數學上的慣例以及一些設計工具不同，所以從別處複製來的漸層常常出現旋轉。

三種類型

線性沿著直線延伸，涵蓋幾乎所有實際用途。放射狀從一個點向外擴散，適合光暈與聚光燈。圓錐狀繞著中心掃過，圓餅圖與色輪就是用它製作的。

漸層是圖片，不是顏色

這是另一件讓人栽跟斗的事。CSS 將漸層視為背景圖片，因此它可用於 background 與 background-image，但不能用於 color、border-color 或任何其他預期單一顏色的地方。文字漸層需要 background-clip，那是另一種獨立的技巧。

加入中間色

兩個停駐點會產生乾淨的混色。第三個則讓您讓轉變經過另一種色相，避免兩種相反顏色直接混合時出現的混濁灰色。