CSS 漸層產生器
拖曳調整色標、即時預覽，調好後一鍵複製 CSS 或下載成 PNG 圖檔。支援 linear、radial、conic 三種漸層類型，免安裝、免註冊，所有運算都在你的瀏覽器完成。
三種漸層類型
線性漸層 linear-gradient
沿著一條直線的方向漸變，是最常用的一種。角度以正上方為 0 度、順時針遞增，所以 90 度是由左往右、180 度是由上往下。按鈕、卡片、頁首背景大多用這種。
background: linear-gradient(135deg, #ffe0cc 0%, #e3b5ce 100%);徑向漸層 radial-gradient
從一個中心點向外擴散。形狀可以是圓形或橢圓，中心點也能移到任意位置。適合做聚光效果、光暈，或帶景深感的背景。
background: radial-gradient(circle at 50% 38%, #f3e2d4 0%, #b6b0c4 100%);角度漸層 conic-gradient
繞著中心點旋轉一圈漸變，像圓餅圖那樣掃過去。常用來做色相環、載入動畫，或直接畫出圓餅圖。主流瀏覽器自 2021 年起都已支援，但若要相容很舊的版本，建議另外準備一個純色的備援樣式。
background: conic-gradient(from 0deg at 50% 50%, #e8ccd6, #ccd2e6, #e8ccd6);操作方式
- 拖曳軌道上的圓點，調整色標位置
- 雙擊軌道空白處新增色標，新色標會取該位置的內插色，加進去不會突兀
- 選取色標後按 Delete，或把圓點往軌道外拖，即可刪除
- 圓點取得焦點時可用方向鍵微調，按住 Shift 加速十倍
- 徑向與角度模式下，點擊面板以外的背景可設定漸層中心
- 調好的狀態會存在瀏覽器裡，關掉再打開仍然還在
常見問題
漸層可以放幾個顏色？
CSS 規格沒有上限，這個工具也不設限，最少兩個。不過超過四、五個之後通常會顯得雜亂，實務上兩到三個最耐看。
為什麼漸層中間看起來灰灰的？
因為 CSS 預設在 sRGB 色彩空間做內插。當兩個顏色的色相相距很遠，例如橘色接藍色，中間會經過一段低彩度的過渡帶，看起來就像蒙了一層灰。解法是在中間多加一個色標，手動指定你想要的過渡色。
複製出來的 CSS 要貼在哪裡？
貼進元素的樣式裡就行，例如 .hero { background: linear-gradient(...); }。漸層在 CSS 裡的身分是背景圖片，所以寫成 background-image 也可以。
下載的 PNG 是什麼尺寸？
提供 1920×1080、1080×1080、1080×1920 三種，分別對應桌機桌布、社群方形貼文、手機直式圖片。
我調的顏色會被上傳嗎？
不會。這個工具沒有後端，全部運算都在你的瀏覽器內完成，調色紀錄只存在自己電腦的 localStorage，關掉分頁也不會傳到任何地方。