漸變生成器
線上CSS漸變生成工具，建立線性漸變、徑向漸變，可視化調整並一鍵複製程式碼
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);什麼是CSS漸變？
漸層工具用來產生可直接放進網頁與介面的 CSS 色彩漸層，例如背景、按鈕、卡片、圖表和設計原型。你可以調整顏色、色標位置、方向、角度與透明度，不需要手寫複雜的 linear-gradient 或 radial-gradient。它適合在品牌色之間尋找自然過渡，也適合檢查文字疊在漸層上是否仍然清楚。好的漸層不只是漂亮，還要保留對比、避免干擾內容，並在不同螢幕與明暗主題下維持穩定。
如何使用
如何使用
- 選擇漸層類型：線性或徑向
- 新增色彩停點並調整每個顏色的位置
- 線性漸層可設定角度方向（0–360 度）
- 即時預覽漸層效果
- 點選「複製程式碼」取得 CSS 程式碼
- 選擇預設樣式，快速套用常見漸層
CSS 使用提示
- 在漸層上放置文字時，請檢查對比度與可讀性；顏色再漂亮也可能不符無障礙需求。
- 在實際容器中測試產生的 CSS，因為漸層方向與色標位置在不同長寬比下呈現效果不同。
使用場景
技術原理
CSS 漸層是影像值而非顏色——linear-gradient()、radial-gradient() 和 conic-gradient() 解析為 <image> 標記，瀏覽器在任何 background-image、mask-image 或 border-image 位置中將其柵格化。線性形式接受一個角度（0deg 向上，90deg 向右，順時針遞增）或 'to <side>' 關鍵字（由對角線計算得出），後接以逗號分隔的色彩停點列表，可帶百分比或長度位置。徑向形式接受形狀（circle | ellipse）、大小關鍵字（closest-side，預設為 farthest-corner）和 'at <position>' 錨點。錐形形式從 'from <angle>' 開始繞中心掃描停點，在 Chrome 69+、Safari 12.1+ 和 Firefox 83+ 中受支援。<br /><br />色彩插值預設為 sRGB，在感知上不均勻，會在藍色和黃色等遠距離色相之間產生灰濛的灰色帶。CSS Color Level 4 引入了 'in <colorspace>' 語法的顯式色彩空間——'in oklch'、'in lab'、'in srgb-linear'、'in hsl longer hue'——使過渡在整個色譜中保持彩度。硬色帶透過給兩個停點相同位置（'red 50%, blue 50%'）產生，色彩提示則在不插入停點的情況下移動中點（'red, 20%, blue'）。<br /><br />當漸層需要離開 CSS 管線時，Canvas 暴露了相同的原語：CanvasRenderingContext2D.createLinearGradient(x0, y0, x1, y1)、createRadialGradient(x0, y0, r0, x1, y1, r1) 和 createConicGradient(startAngle, x, y) 回傳 CanvasGradient 物件，接受 addColorStop(offset, color)，可在匯出前透過 toDataURL('image/png') 賦值給 fillStyle。SVG 提供了標記等效的 <linearGradient> 和 <radialGradient>，其 spreadMethod 值為 'pad'（預設）、'reflect' 和 'repeat'，用於平鋪行為。
- 線性形式：linear-gradient(<angle> | to <side-or-corner>, <color-stop>+)——0deg 向上，順時針遞增；'to bottom right' 根據容器尺寸計算，而非固定的 135deg
- 徑向形式：radial-gradient([<shape> <size>]? at <position>, <stops>)——大小關鍵字 closest-side、closest-corner、farthest-side、farthest-corner（預設）
- 錐形形式：conic-gradient(from <angle> at <position>, <stops>)——繞中心掃描；Chrome 69+、Safari 12.1+、Firefox 83+
- 色彩插值：CSS Color Level 4 'in oklch | lab | srgb-linear | hsl shorter|longer hue' 覆蓋感知不均勻的 sRGB 預設，避免遠距離色相之間出現灰色帶
- 硬停點與提示：兩個停點在同一位置（'red 50%, blue 50%'）產生銳利色帶；單獨百分比（'red, 20%, blue'）是色彩提示，移動 50% 混合點
- Canvas API：createLinearGradient(x0,y0,x1,y1)、createRadialGradient(x0,y0,r0,x1,y1,r1)、createConicGradient(angle,x,y) 回傳 CanvasGradient；addColorStop(offset, color) 然後賦值給 fillStyle
- SVG 等效：<linearGradient> 和 <radialGradient> 搭配 spreadMethod='pad'|'reflect'|'repeat' 控制超出漸層邊界的平鋪
範例
簡易雙色漸層 (135deg)
background: linear-gradient(135deg, #667eea, #764ba2);
Use: hero banner、區塊分隔；135deg 方向營造柔和的對角流動感多色停駐點線性漸層
background: linear-gradient(90deg, #ff6b6b 0%, #feca57 50%, #48dbfb 100%);
Note: 三個固定百分比的色彩停駐點構成日落般的漸變；停駐點越多，過渡越豐富放射狀漸層 (圓形)
background: radial-gradient(circle, #fff 0%, #000 100%);
Use: 暗角效果、聚光高光；'circle' 形狀關鍵字確保漸層維持圓形，不受容器尺寸影響常見問題
可以產生哪些漸層類型？
CSS linear-gradient（預設）、radial-gradient 與 conic-gradient。線性漸層是直線；放射漸層由中心向外擴散；圓錐漸層則像派餅一樣繞著中心旋轉。每種類型在編輯器中都有自己的形狀參數。
可以加多少個色彩節點？
沒有硬性上限，但超過約 10 個節點會讓編輯變得繁瑣，產生的 CSS 也會變大。多數美觀的漸層只用 2 至 4 種顏色。頁面允許你拖曳節點沿著漸層軌道微調位置。
支援哪些輸出格式？
標準的 CSS background-image 語法，可直接貼到樣式表使用。部分版本也能輸出 PNG（依指定尺寸點陣化）、SVG（向量），或 Tailwind CSS 的任意值語法。
為什麼我的漸層看起來「分層」？
顏色相近、色域偏窄的漸層會出現可見色帶，因為螢幕每個通道僅有 256 階。可加入輕微雜訊（CSS filter 或 SVG 雜訊覆蓋），或選用對比較大的端點顏色。某些瀏覽器在漸層抖色處理上比其他瀏覽器更好。
如何做出「網格」或「多方向」漸層？
CSS 並沒有原生的網格漸層。你可以用多個含透明度的 radial-gradient 疊在同一個 background-image 中（多重背景，以逗號分隔）來近似。本頁可能提供「多節點」模式自動完成這件事。
可以使用透明度嗎？
可以。色彩節點接受 alpha（rgba 或帶 alpha 的 8 位十六進位）。可用來讓漸層淡入背景，或疊加多層漸層。現代瀏覽器都完整支援漸層節點的 alpha。
漸層是在本機產生的嗎？
是的。所有處理都在你的瀏覽器中完成。產生的 CSS 只是文字，點陣化匯出由 canvas 完成——不會上傳任何資料。