CSS漸變生成器
建立CSS線性和徑向漸變。
顏色節點
0%
100%
方向
角度90deg
CSS輸出
快速預設
推薦工具
精心挑選的實用工具
駕馭CSS漸變
Overview
想脫離純色背景,CSS漸變是最簡單的方法。`linear-gradient`、`radial-gradient`、`conic-gradient`三種,各產生不同視覺效果。此生成器視覺編輯顏色停止位置、角度、形狀,即時預覽。支援多色停止、透明度、重複圖案。
How It Works
用滑塊新增、移動、刪除色停點。角度0-360度,徑向選中心位置。生成的CSS包含多個備用語法,舊瀏覽器也工作。輸出可直接貼上CSS。
When to Use This
英雄區背景。按鈕3D風效果。卡片微妙深度新增。頭像佔位符(錐形漸變虹色)。載入閃爍動畫。品牌色柔和變化表達。
Frequently Asked Questions
CSS漸變比影像輕得多(幾字節vs幾百KB)。僅動畫時注意GPU負載。