CSS 漸層產生器
視覺化設計 CSS 線性與放射漸層，選擇兩個顏色與方向，即時預覽並取得 CSS 程式碼
#3B82F6
#8B5CF6
°
預覽
CSS 程式碼
background: linear-gradient(90deg, #3b82f6, #8b5cf6);關於此工具
CSS 漸層讓您直接在 CSS 中建立兩個或多個顏色之間的平滑過渡，無需任何圖片檔案。CSS 漸層完全可縮放、渲染速度快，且所有現代瀏覽器均支援。QuickKit 的 CSS 漸層產生器提供線性和放射漸層的即時視覺編輯器——選擇顏色、調整方向或形狀，一鍵複製即可使用的 CSS 程式碼。
功能特色
- ✓線性與放射漸層 — 一鍵切換 linear-gradient（方向性）和 radial-gradient（圓形/橢圓形）兩種類型。
- ✓八種方向預設 — 線性漸層提供八個方向箭頭：上、下、左、右及四個對角方向。
- ✓雙色彩點 — 使用瀏覽器原生色彩選擇器選取起始和結束顏色，變更即時反映在預覽中。
- ✓即時預覽 — 大型預覽面板即時更新，讓您在複製前確認漸層的實際效果。
- ✓複製 CSS — 直接輸出可貼入樣式表的完整 CSS background 屬性值。
常見問題
- 什麼是 CSS 線性漸層？
- 線性漸層沿指定方向的直線過渡顏色（如 to bottom、to right 或自訂角度如 135deg）。CSS 函式 linear-gradient(direction, color1, color2, …) 可接受多個色彩停靠點，並可選擇性設定百分比位置，實現複雜的多色效果。
- 什麼是 CSS 放射漸層？
- 放射漸層從中心點向外以圓形或橢圓形擴散顏色，以 radial-gradient(shape size at position, color1, color2, …) 定義。常見用途包括聚光燈效果、發光按鈕背景和圓形徽章填充。
- CSS 漸層比漸層圖片好嗎？
- 幾乎在所有情況下都是如此。CSS 漸層不需要任何 HTTP 請求，可完美縮放至任何解析度（包括視網膜螢幕），且可透過 CSS 變數或 JavaScript 動態修改。唯一例外是具有大量精確色彩停靠點的攝影式漸層，此時圖片檔案可能更簡單。
- 如何增加更多色彩停靠點？
- 本工具為簡化操作只產生兩個色彩停靠點（起點和終點）的漸層。如需更多停靠點，複製 CSS 後手動擴充：linear-gradient(to right, #ff6600, #ffcc00, #33cc33)。每個額外停靠點可加上百分比定位：如 #ffcc00 50% 表示放在中間位置。