免費轉換器
CSS 漸層 生成器
透過即時預覽視覺化生成CSS漸層。使用自訂顏色節點建立線性、放射和錐形漸層 — 免費且在客戶端運行。
即時預覽
CSS輸出
.element {
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}Gradient Type
角度 (90deg)
0°90°180°270°360°
Color Stops
#6366f10%
#ec4899100%
透過即時預覽視覺化生成CSS漸層。使用自訂顏色節點建立線性、放射和錐形漸層 — 免費且在客戶端運行。
.element {
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}使用視覺化編輯器建立漂亮的 CSS 線性和徑向漸層。選擇顏色、調整停止點、更改方向或角度，並即時查看即時預覽更新。複製產生的 CSS 程式碼（包括舊版瀏覽器的供應商前綴）並將其直接貼上到樣式表中。