使用方式
- 選擇線性、放射狀或圓錐漸層，再設定角度或中心位置。
- 設定每個色標的顏色、不透明度和位置。最多可新增六個色標，也可以移除不需要的色標。
- 確認預覽效果，再將 CSS 程式碼複製到樣式表中。
運作方式
輸出內容是標準的 CSS 背景宣告。線性漸層沿著角度延伸：0deg 表示由下往上，90deg 表示由左往右，180deg 表示由上往下。放射狀漸層會從中心點向外擴散，形成圓形或符合方框比例的橢圓形。圓錐漸層會以中心點為軸，從指定角度開始環繞延伸，適合製作類似圓餅圖的效果和色輪。
色標會依位置順序排列，因此您可以自由拖曳位置。降低不透明度的色標會以 rgba() 表示，讓背景透出來。兩個色標位於相同位置時會形成銳利邊緣，而不是漸層混色，可用來製作條紋。
目前所有瀏覽器都支援這三種漸層函式。漸層預設會在 sRGB 色彩空間中混色，因此互補色之間可能會稍微偏灰（例如藍色和黃色）；加入較明亮的中間色標即可避免這種情況。
範例
低調的標題背景
linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%) 可產生柔和的由上往下漸層，並保持深色文字清晰易讀。
銳利邊緣條紋
使用四個色標：#0b5d1e 0%、#0b5d1e 50%、#f2c14e 50%、#f2c14e 100%。兩個位於 50% 的色標相接而不混色，形成兩個純色區塊。
聚光燈效果
在底色上疊加從 rgba(255, 255, 255, 0.6) 到 rgba(255, 255, 255, 0) 的放射狀漸層（左上角的圓形），即可在角落形成柔和的光照效果。
常見問題
0deg 是朝哪個方向？
在 CSS 中，0deg 指向上方，因此漸層會從底部開始，延伸至頂部。90deg 表示由左往右。這和部分設計應用程式不同，因為那些程式通常以 0° 表示由左往右。
可以將漸層套用到文字嗎？
可以：先套用背景，再加入 background-clip: text 和 color: transparent。請確認文字在漸層的每個位置都能清楚閱讀，不會和頁面背景混淆。
需要加上 -webkit-linear-gradient 等瀏覽器前綴嗎？
不需要。目前的瀏覽器都支援不加前綴的語法。只有支援多年前的舊版瀏覽器時才需要加上前綴。
隱私權
所有內容都在您的瀏覽器中產生。您的顏色和設定不會傳送或儲存。