CSS 漸層產生器
使用此免費線上工具輕鬆製作漂亮的 CSS 漸層。支援線性與放射狀漸層、多個顏色斷點以及角度調整。
CSS 漸層產生器
使用此免費線上工具輕鬆製作漂亮的 CSS 漸層。支援線性與放射狀漸層、多個顏色斷點以及角度調整。
關於 CSS 漸層
輸出標準 background 宣告
線性漸層會使用您選擇的角度，放射狀漸層會使用 circle 或 ellipse 形狀。複製結果是一行 background 宣告，可以直接貼進樣式表。
顏色斷點會依位置排序
您可以新增多個顏色斷點、選擇每個顏色，並將位置設在 0 到 100 percent 之間。產生的 CSS 會先依位置排序再合併斷點，讓漸層宣告保持可預期。
常見問題
關於這個主題的常見疑問與實用解答。
支援哪些漸層類型？
支援線性與放射狀漸層，可完全控制角度、形狀與顏色斷點位置。
可以新增多個顏色斷點嗎？
可以，可新增任意數量的顏色斷點並自訂位置，創造複雜的漸層效果。
產生的程式碼跨瀏覽器相容嗎？
是的，輸出標準 CSS 漸層語法，適用於所有現代瀏覽器。
我的資料會被傳送到伺服器嗎？
不會，漸層 CSS 生成完全在您的瀏覽器中進行。您的顏色選擇與設定在本地處理，不會傳送至任何伺服器。