網頁設計
CSS 漸層產生器
linear / radial / conic 三模式
🔒 本機處理與外部服務的使用方式請查看本工具的隱私說明；網站統計服務另見隱私政策。
快速理解
CSS 漸層產生器可以怎麼幫你？
免費 CSS gradient 漸層產生器，支援 linear/radial/conic 三種類型，可自訂角度、色彩節點、位置。即時預覽 + 一鍵複製 CSS。
適合情境
適合調整線性、圓形放射與圓錐漸層，直接比較色標位置和角度對背景的影響。輸出為單一 CSS background 宣告，沒有圖片下載、透明度控制、文字對比檢測或多層背景編輯。
使用方式
預設是 90 度線性漸層，兩個色標位於 0% 與 100%。選擇類型、顏色及位置，可新增色標但至少保留兩個；角度以 5 度調整，放射模式不使用角度，也可從預設樣式開始修改。
結果怎麼看
輸出會按位置排序色標，而不是依新增順序排列。放射漸層固定為 circle，圓錐漸層固定中心 50% 50%；複製內容已含 background: 與分號，可放入樣式規則中，再以實際元素尺寸檢視。
隱私與限制
顏色、角度與預覽由瀏覽器直接產生，元件沒有送出配色或寫入設計歷史。按複製會把 CSS 放進系統剪貼簿；若瀏覽器拒絕剪貼簿操作，可從輸出文字自行選取需要的宣告。
色標位置會限制在 0 到 100 的整數，超限值截至邊界，小數去除小數部分，空白暫以零預覽。預覽只顯示背景，不會檢查其上的文字對比；套用時仍需以真實文字、元素尺寸及不同裝置核對。
常見問題
什麼是 conic 漸層？
錐形漸層，色彩繞中心點旋轉。適合做圓餅圖、進度環效果。
radial vs linear？
linear 從一端到另一端線性過渡；radial 從圓心向外擴散。
支援哪些瀏覽器？
linear/radial 所有現代瀏覽器都支援。conic 需要 Chrome 69+ / Safari 12.1+ / Firefox 83+。