CSS Gradient Generator

關於本工具

CSS漸層生成器可建立可直接貼入CSS的平滑多色漸層。支援線性（方向性）和放射狀（圓形）漸層，可新增任意數量的顏色節點。

顏色節點定義了漸層軸上每種顏色的起止位置。角度滑桿可將線性漸層方向從0°旋轉至360°。

使用方法

1. 選擇線性或放射狀漸層類型。
2. 對於線性漸層，拖動角度滑桿設定方向。
3. 點擊色塊更改顏色，拖動位置滑桿調整節點位置。
4. 點擊+新增節點按鈕新增更多顏色節點，點擊✕刪除節點。
5. 點擊複製將CSS background宣告複製到剪貼簿。

使用情境

Web設計師用CSS漸層代替圖片建立主視覺區背景，檔案更小且解析度無限。品牌團隊生成符合企業配色規範的漸層調色板。開發者為卡片、按鈕和疊加層原型化漸層填充。

常見問題

• 線性漸層和放射狀漸層有什麼區別？ — 線性漸層沿給定角度的直線過渡顏色。放射狀漸層從中心點向外輻射顏色。
• 可以使用兩種以上的顏色嗎？ — 可以。點擊+新增節點按鈕新增任意數量的顏色節點，每個節點有獨立的顏色和位置。
• 生成的CSS跨瀏覽器相容嗎？ — 是的。標準的linear-gradient()和radial-gradient()函數無需廠商前綴，在所有現代瀏覽器中完全支援。