色彩與設計
CSS 漸層產生
CSS 漸層產生器是一款只要以 GUI 操作顏色、方向與色彩停駐點,就能自動產生 CSS 漸層程式碼的免費工具。支援線性（linear）、放射（radial）、圓錐（conic）三種漸層,可一邊看著即時預覽,一邊快速做出可用於網站背景、按鈕、標題等場景的漸層。
色彩停駐點（顏色變化的起點）
漸層類型
預覽
CSS 程式碼
.gradient {
background-image: linear-gradient(90deg, #6366F1 0%, #EC4899 100%);
}
漸層的產生全程在您的瀏覽器中完成,輸入的內容不會傳送到外部伺服器。
相關工具
色彩選擇器
從圖片中擷取顏色並取得色碼的免費色彩選擇器，可用放大鏡依像素精準拾取，支援 HEX / RGB / HSL 切換與調色盤匯出。免費、免註冊。
色碼轉換
在 HEX、RGB、HSL、HSV、OKLCH 色碼之間互相轉換的免費工具，支援透明度（RGBA、8 位 HEX）與 CMYK 參考值，一鍵複製任意格式，全程在瀏覽器中完成。
對比度檢查
即時計算前景色與背景色對比度的免費對比度檢查工具，依 WCAG 2.1/2.2 判定 AA、AAA 是否合格，並支援合格色建議、色覺（色盲）模擬與 APCA，全程在瀏覽器中完成。
配色產生器
只要選一個基準色，就能依配色理論自動產生互補色、類似色、三角配色等配色方案的免費配色產生器。可輸出 CSS 變數、Tailwind、SCSS、JSON 格式，並提供對比度參考，全程在瀏覽器中完成。
CSS 漸層產生是什麼?
CSS 漸層產生器是一款只要以 GUI 操作顏色、方向與色彩停駐點,就能自動產生 CSS 漸層程式碼的免費工具。支援線性（linear）、放射（radial）、圓錐（conic）三種漸層,可一邊看著即時預覽,一邊快速做出可用於網站背景、按鈕、標題等場景的漸層。
選好類型後,線性與圓錐可用滑桿調整角度,放射則可指定形狀（圓形、橢圓）與中心位置。顏色以色彩停駐點的形式自由新增、刪除,可拖曳色條上的控制點來改變位置,也能用顏色選擇器或 HEX 輸入挑選顏色。每個停駐點還能設定不透明度（Alpha),製作使用 rgba() 的半透明漸層。按下「隨機產生」按鈕,也能立即嘗試各種配色靈感。
製作好的漸層,可一鍵複製為 CSS（background-image）、CSS 變數（:root { --gradient }）、Tailwind 的 backgroundImage、SCSS 變數等格式,直接貼進實作中。此外,按下「複製 URL」即可取得能重現目前漸層的分享 URL,便於團隊分享或加入書籤。
漸層的產生全程在您的瀏覽器中完成,輸入的內容不會傳送到外部伺服器。無需註冊帳號、也不必點擊廣告,立即就能使用。
使用方法
- 點擊色彩停駐點的色條新增顏色,拖曳控制點改變位置。顏色可用顏色選擇器或 HEX 指定,不透明度（Alpha）則以滑桿調整。按「隨機產生」即可立即嘗試各種配色靈感。
- 選擇漸層類型（線性、放射、圓錐)。線性與圓錐可用滑桿調整角度,放射則調整形狀（圓形、橢圓）與中心位置。
- 在預覽中即時確認漸層的呈現效果。按下「複製 URL」,即可取得能重現目前設定的分享 URL。
- 在「CSS 程式碼」切換 CSS、CSS 變數、Tailwind、SCSS 分頁,按「複製 CSS 程式碼」取得程式碼並貼進實作中。
使用情境
- 想在網站或按鈕背景使用漸層的設計師、切版人員,快速複製貼上備好 CSS。
- 想嘗試線性、放射、圓錐等多種漸層,以決定設計方向的前端工程師。
- 想把漸層直接寫進程式碼,作為 CSS 變數或 Tailwind 設定的開發者。
- 想用帶不透明度的漸層,製作疊在圖片上的遮罩或玻璃擬態效果的使用者。
- 想把決定好的漸層透過分享 URL 交給團隊,或日後重現同一份設定的使用者。
注意事項
- 漸層的產生全程在瀏覽器中完成,輸入的內容不會傳送到外部。
- 圓錐漸層（`conic-gradient`）在部分較舊的瀏覽器可能無法顯示。請確認使用環境的支援狀況。
- 色彩停駐點最多可新增 8 個。不透明度為 100% 時以 `#RRGGBB` 輸出,未滿 100% 時以 `rgba()` 輸出。
- 分享 URL 包含類型、角度、形狀、中心位置與各色彩停駐點（顏色、不透明度、位置)。開啟該 URL 即可以相同設定重現漸層。