CSS Gradient Generator
CSS 漸層產生器
拖曳調整色階即時預覽，產生線性、放射、錐形漸層的 CSS，並同時輸出 Tailwind 寫法。
預覽
設定
0%
100%
常用配色
💡 錐形漸層（conic）在較舊的瀏覽器可能不支援，正式使用前請確認相容性。
CSS 漸層產生器
這款免費 CSS 漸層產生器可以拖曳調整色階與角度、即時預覽效果，一鍵複製 linear-gradient、radial-gradient 或 conic-gradient 語法。
還會同時輸出對應的 Tailwind CSS 寫法，用 Tailwind 的專案可以直接貼。內建幾組現成配色範本，色階數量不限、可自由增減。全程本機執行、免註冊。
常見問題 FAQ
支援哪些漸層類型？
線性漸層（linear-gradient）、放射漸層（radial-gradient）與錐形漸層（conic-gradient）三種，線性與錐形可調整角度。
可以加幾個色階？
沒有限制，點「＋ 新增色階」即可增加，每個色階都能獨立調整顏色與位置百分比，最少保留兩個。
Tailwind 寫法能直接用嗎？
線性漸層在 0／90／180／270 度會輸出標準的 bg-linear-to-* 類別；其他角度則輸出任意值語法。放射與錐形漸層 Tailwind 沒有內建對應類別，建議直接用 CSS。
錐形漸層相容性如何？
conic-gradient 在較舊的瀏覽器可能不支援，正式上線前建議確認目標客群的瀏覽器版本。
關於鄺聯企業
這款免費工具由 鄺聯企業有限公司（KUANG LIAN ENTERPRISE）製作提供。我們深耕台中，專營企業數位化解決方案，協助客戶導入合適的系統、提升營運效率。
客製化進銷存系統POS 點餐系統連鎖加盟管理系統網站架設網路規劃電腦與周邊
401 台中市東區東光園路 282-1 號04-2215-3616