CSS 漸層產生器
用色標、角度與中心點設計線性、放射或圓錐漸層，即時預覽並複製 CSS，可選 OKLCH 插值。
預設樣式
設定
°
OKLab／OKLCH 的中間色通常更鮮明，不會變灰；CSS 會先寫一行 sRGB 版本給舊瀏覽器。
色標
上移、下移只交換顏色，位置維持不變。最少 2 個、最多 10 個色標。
- %
- %
- %
使用說明
- 先選一個「預設樣式」，或直接從「設定」選擇線性、放射或圓錐漸層。
- 調整角度、形狀與中心點；需要更鮮明的中間色時，把「色彩插值」改成 OKLab 或 OKLCH。
- 在「色標」修改每個顏色與位置，用「新增」「刪除」「上移」「下移」調整，全部都可以用鍵盤操作。
- 上方預覽會即時更新，按「複製」取得 CSS，貼到你的樣式表即可。
常見問題
線性、放射與圓錐漸層有什麼不同？
線性漸層沿著一條直線變化，角度 0° 是由下往上、90° 是由左往右；放射漸層從中心點向外擴散成圓形或橢圓；圓錐漸層則繞著中心點旋轉一圈，適合做圓餅圖或色環。
「色彩插值」選 OKLCH 有什麼好處？
預設的 sRGB 插值在兩個互補色之間常會出現灰暗的中間色，例如藍到黃中間偏灰。OKLab 與 OKLCH 以人眼感知為基礎，中間色亮度均勻、比較鮮明；OKLCH 還能選擇沿較短或較長的色相路徑繞過色環，做出彩虹效果。
舊瀏覽器不支援 in oklch 怎麼辦？
使用 OKLab 或 OKLCH 時，產生的 CSS 會先寫一行不含插值方法的 sRGB 版本，再寫新語法。不支援的瀏覽器會忽略第二行、使用第一行，看到的仍是一般漸層。
色標的位置可以重疊嗎？
可以。兩個色標放在同一個位置會形成清楚的分界線，配合「重複漸層」就能做出條紋。如果某個色標的位置比前一個小，CSS 會把它拉到前一個的位置，本工具會提醒你，並可以按「依位置排序」修正。
可以用透明色嗎？
可以。在色碼後面加上兩位透明度，例如 #ff880080 是半透明的橘色。預覽區以棋盤格背景顯示透明的部分。
我的資料會被上傳嗎？
不會。所有計算都在你的瀏覽器中完成，不需要連網。