CSS 漸層產生器
線性、徑向、錐形漸層視覺化產生，色標透明度隨意調，六種 CSS 寫法與文字對比度檢查
① 渐变类型与方向
deg
② 颜色节点（至少 2 个，输出时自动按位置从小到大排序）
每行从左到右依次是：取色器、HEX 色值、不透明度滑杆、不透明度读数、位置滑杆、位置数值（%）、删除。色值框支持 #abc / #aabbcc / #aabbccdd（后两位是透明度），也能直接粘 rgb()、hsl() 和 orange 这类颜色名。
③ 实时预览与文字可读性
文字色
透明处假设底色
④ CSS 代码
⑤ 常用渐变色板（点击直接载入到上面的编辑器）
工具介紹
寫漸層最花時間的從來不是想不出配色，而是 45deg 到底朝哪一邊、透明度該寫成 rgba 還是 8 位 HEX、repeating 為什麼沒反應這類反覆試錯。這個工具把參數攤開來拖，右側的 CSS 隨時可複製：
- 三種類型隨時切換：linear-gradient 線性、radial-gradient 徑向、conic-gradient 錐形，切換後只留下目前類型用得上的控制項，不會讓形狀選項出現在線性漸層裡
- 角度與中心可視化：0 至 360 度滑桿搭配數字框，八個方位按鈕直接點（上 0 度、右 90 度、下 180 度、左 270 度等）；徑向與錐形還能分別拖曳 X / Y 中心，或用九宮格一鍵定位到左上角、正中央等位置
- 任意多個顏色節點：每個節點單獨設定顏色、不透明度與位置，可在最寬的縫隙插入中間色，也能一鍵均分位置、整體鏡像、把尾色漸隱到全透明
- 色值怎麼貼都行：3 位、6 位、8 位 HEX，
rgb()、rgba()、hsl()、hsla()與 orange、transparent 這類顏色名都能辨識，內部統一換算成 HEX 再輸出 - 六種 CSS 寫法：background-image、background 簡寫、多行縮排、行內 style、Tailwind 任意值、CSS 自訂屬性，顏色本身還能切成 HEX / rgb() / hsl() 三種記法
- 後備純色開關：勾選後先寫
background-color再寫background-image，瀏覽器不支援 conic-gradient 時不會整塊空白 - 帶棋盤底的即時預覽：透明部分一眼可見，漸層上還能疊一行範例文字，逐個色標算出對比度並給出 WCAG 2.1 判定
- 12 個色板與隨機配色：落日、海洋、霓虹這類常用漸層點擊即載入，其中包含 repeating 斜紋與 conic 彩虹環兩種平時不太好手寫的樣式
- 純前端計算：不呼叫介面、不上傳資料，改任何參數都即時重算並刷新程式碼區塊
使用情境
- 給按鈕、卡片、橫幅挑背景漸層，順便確認上面的白字能不能看清
- 寫 Tailwind 專案需要
bg-[...]任意值類名，不想手工把空格換成底線 - 做遮罩漸隱（把某個顏色過渡到透明）需要正確的 8 位 HEX 或 rgba 寫法
- 設計稿只給了「45 度橘色漸層」，需要還原成能直接貼上的 CSS
- 理解 conic-gradient 為什麼沒有 repeating 版本、色標位置為什麼不等於距離
三種漸層的座標並不一樣
| 類型 | 產生範例 | 色標百分比的含義 | 常用來做什麼 |
|---|---|---|---|
| linear | linear-gradient(135deg, #ff512f 0%, #dd2476 100%) | 沿漸層線方向的距離比例 | 按鈕、橫幅、卡片底色 |
| radial | radial-gradient(ellipse farthest-side at 30% 20%, #ff512f 0%, #dd2476 100%) | 從中心往外的半徑比例 | 光斑、聚光、立體高光 |
| conic | conic-gradient(from 45deg at 50% 50%, #ff512f 0%, #dd2476 100%) | 角度比例，50% 等於 180 度 | 圓餅圖、色環、進度環 |
這也是錐形漸層最容易踩的坑：把線性的 50% 直接搬過去，語意已經從「走到一半距離」變成「轉到一半角度」。
角度、中間色與透明度
| 寫的角度 | 等價方向關鍵字 | 顏色往哪一邊走 |
|---|---|---|
| 0deg | to top | 由下往上 |
| 90deg | to right | 由左往右 |
| 135deg | to bottom right | 左上往右下 |
| 180deg | to bottom | 由上往下 |
| 270deg | to left | 由右往左 |
- 角度會自動歸一：輸入 400 得到
linear-gradient(40deg, ...)，輸入 -45 得到linear-gradient(315deg, ...)，與瀏覽器算繪結果一致，但程式碼短一半 - 中間色是兩端的平均：黑到白的漸層在 50% 處是
#808080，所以「在最寬處加一個節點」插出來的就是這一段的中間色 - 透明度寫成 8 位 HEX：0.5 對應
80、0.25 對應40、全透明對應00，例如#39ff1400；同一漸層改成 rgb 記法會得到rgba(57,255,20,0) - hsl 換算會取整：
#ff512f輸出hsl(10,100%,59%)，因為色相與亮度都按整數表示，來回轉換可能有 1 個色階的偏差，介意的話保持 HEX 記法
漸層上的文字能不能看清
預覽區會按每個色標算一次對比度，並指出最差的那一處。透明度小於 1 的色標會先與你設定的假設底色混合，再計算相對亮度：
| 文字 / 背景 | 對比度 | 工具判定 |
|---|---|---|
| 白字 / #767676 | 4.54:1 | 正文達標（WCAG AA 門檻 4.5:1） |
| 白字 / #777777 | 4.48:1 | 差一點，正文不達標 |
| 白字 / #808080 | 3.95:1 | 只夠大字級文字（門檻 3:1） |
| 白字 / 白字處色標 | 1.00:1 | 完全看不見，必須改文字色或加遮罩 |
| 黑字 / 純白底 | 21.00:1 | 兩項都達標 |
大字級文字指 24px 以上，或 18.66px 加粗。漸層的可讀性最差處往往只出現在某一小段，所以工具逐個色標列出比值，而不是只給一個平均值。
常見問題
- 勾了 repeating 卻看不出重複？只有色標沒鋪滿 0% 至 100% 時才會重複。色板裡的「斜紋條」最後一站停在 24%，每 24% 重複一次；把最後一站拖到 100% 就變回普通漸層
- 錐形漸層為什麼沒有 repeating 版本？規範裡寫了
repeating-conic-gradient()，但至今沒有瀏覽器實作，所以工具在錐形模式下直接隱藏這個開關，避免產出無效 CSS - 需要加 -webkit- 前綴嗎？不需要。linear-gradient 與 radial-gradient 在 Chrome 26+、Firefox 16+、Safari 6.1+、Edge 12+ 都可無前綴使用；conic-gradient 需要 Chrome 69+、Edge 17+、Safari 12.1+、Firefox 83+
- 後備純色不能搭配 background 簡寫？因為
background:是簡寫屬性，會把background-color一起重設成透明，後備就白寫了。選取「background 簡寫」時工具會自動取消勾選並提示，請搭配 background-image 使用 - 能直接匯出圖片嗎？漸層本身是向量背景，不需要圖片檔，也不會因為縮放而模糊。只有在電子郵件範本、微信圖文這類只接受點陣圖的場合才需要轉成圖片
- 兩段顏色中間發暗發灰怎麼辦？CSS 預設在 sRGB 裡線性插值，紅到綠會經過一塊暗黃。可以把漸層拆成三段、在中段手動補一個提亮的色標，或在現代瀏覽器改用
linear-gradient(in oklab, ...)這類指定插值空間的寫法（工具輸出的是相容性最好的經典寫法，未加插值空間關鍵字） - 想拿到 Tailwind 類名？輸出格式裡選「Tailwind 任意值」，空格會自動換成底線，例如
bg-[linear-gradient(135deg,#ff512f_0%,#dd2476_100%)] - 色值框能貼什麼？
#abc、#aabbcc、#aabbccdd、rgb(57, 255, 20)、hsl(111, 100%, 54%)與 orange 這類顏色名都認得，辨識不了時會保留上一次的有效顏色並給出提示。單一顏色請直接用background-color，所以工具至少保留 2 個節點
拿到的色值要換算格式用顏色轉換，漸層寫進樣式表後要整理縮排用 CSS 格式化，想把漸層做成向量圖再用 SVG 預覽檢查。所有編輯與計算都在瀏覽器本機完成，配色方案不會上傳到伺服器。