使用說明
選擇線性、放射狀或圓錐漸層，加入色標並調整每個色標的顏色與位置，預覽會即時更新。線性漸層可調角度，放射與圓錐漸層可選中心位置，另外還能切換成 repeating 版本做出條紋效果。輸出是標準的 background-image 宣告，不含任何前綴，現代瀏覽器可直接使用。
CSS / FRONTEND · 瀏覽器內處理
CSS 漸層產生
產生 linear、radial 與 conic 漸層，即時預覽並複製 CSS。
最多 8 個色標。輸出為單一 background-image 宣告，可直接貼進樣式表。
background-image: linear-gradient(135deg, #6d5efc 0%, #00c2ff 100%);
預設樣式
預設樣式
漸層類型
漸層類型
色標
操作步驟
- 選擇漸層類型，或直接套用一組預設配色。
- 調整角度、中心位置，並拖曳色標位置。
- 複製產生的 background-image 宣告。
隱私
所有計算與預覽都在這個瀏覽器內完成，輸入不會上傳、不會保存，也不會寫進網址或紀錄。
常見問題
- conic-gradient 相容性如何？
- 圓錐漸層在 Chrome、Edge、Firefox、Safari 的現行版本都已支援，主要用於圓餅圖或色相環這類效果。若必須支援很舊的瀏覽器，建議改用線性或放射狀漸層。
- 為什麼輸出沒有 -webkit- 前綴？
- 漸層語法早已標準化，現行瀏覽器都不需要前綴，多加反而可能因為舊式語法不同而產生不一致的結果。這裡固定輸出標準語法。