🎨 CSS 漸層產生器

EN
°

色彩停靠點

預設漸層

多種漸層

支援線性、徑向、錐形三種 CSS 漸層類型。

精確控制

自由調整角度、色彩停靠點位置，精確打造漸層效果。

即時預覽

調整參數即時預覽漸層效果，所見即所得。

一鍵複製

生成的 CSS 程式碼一鍵複製，直接貼到專案中使用。

完全隱私

所有處理在瀏覽器本地完成，不上傳任何資料。

完全免費

無需註冊、無使用限制，永久免費使用。

相關文章

CSS 漸層完整教學：從線性到錐形漸層

全面介紹 CSS 的三種漸層類型，包含語法、參數設定和實際應用範例。

完整教學

CSS 漸層設計：配色風格與介面應用

探索當前最流行的漸層設計趨勢，從柔和漸層到大膽撞色，掌握設計靈感。

設計趨勢

CSS 漸層效能與最佳實踐：渲染優化指南

了解 CSS 漸層對頁面渲染效能的影響，學習如何寫出高效能的漸層樣式。

效能優化

漸層與無障礙設計：確保所有人都能使用

學習如何在使用漸層的同時確保網頁的無障礙性，符合 WCAG 標準。

無障礙

常見問題

什麼是 CSS 漸層？
CSS 漸層是一種用 CSS 創建的背景效果，可以在兩種或多種顏色之間平滑過渡。常用的類型有線性漸層（linear-gradient）、徑向漸層（radial-gradient）和錐形漸層（conic-gradient）。
線性漸層和徑向漸層有什麼區別？
線性漸層沿一條直線方向過渡（可設定角度），徑向漸層從中心點向外呈圓形或橢圓形過渡，錐形漸層則圍繞中心點旋轉過渡。
可以新增幾個色彩停靠點？
理論上沒有限制，但建議使用 2-5 個色彩停靠點以獲得最佳視覺效果。過多的停靠點可能讓漸層顯得雜亂。
生成的 CSS 相容哪些瀏覽器？
現代主流瀏覽器（Chrome、Firefox、Safari、Edge）都完全支援 CSS 漸層。IE 11 支援基本的線性漸層但不支援錐形漸層。
如何在實際專案中使用？
只需點擊「複製 CSS」按鈕，然後將生成的 background 屬性貼到您的 CSS 檔案中即可。可用於任何支援 background 的 HTML 元素。
linear-gradient 與 radial-gradient 有什麼差別？

linear-gradient 沿指定方向或角度變化顏色，radial-gradient 則從中心向外形成放射漸層。本頁可切換類型並調整色彩與位置，預覽兩種效果。

如何將產生的漸層套用到 CSS 背景？

複製產生的 CSS，貼到要使用漸層的元素背景樣式中。可先在按鈕、卡片或區塊上試用，再依實際尺寸調整角度與色彩停駐點。