CSS 漸層生成器
建立精美的線性、放射狀和圓錐 CSS 漸層，實時預覽效果。選擇顏色、調整色標，即時複製 CSS 代碼。
即時預覽 一鍵匯出 CSS 精選預設 100% 瀏覽器端
即時預覽
0%100%
100%100%
CSS 輸出
.element {
background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
}預設庫
CSS 漸層生成器特色
為您的網頁專案打造精美漸層所需的一切。
即時預覽
調整顏色、色標和方向時，立即看到漸層效果更新。
一鍵匯出 CSS
複製生成的 CSS 漸層代碼，可直接貼到樣式表中。
精選預設
從 12 個手工製作的漸層預設中選擇，快速展開您的設計。
100% 瀏覽器端
不向任何伺服器傳送資料，一切在您的瀏覽器中本地運行。
漸層使用場景
CSS 漸層在現代網頁設計中無處不在。
網頁背景
為 Hero 區域、頁面背景和分隔區建立引人注目的背景效果。
圖片覆蓋
在照片上疊加漸層以提升文字可讀性或實現藝術效果。
UI 元件
為按鈕、卡片、標籤和進度條應用漸層，增加深度和質感。
漸層文字
結合 background-clip: text 建立令人驚嘆的多色漸層文字效果。
常見問題
在這裡查找常見問題的解答。