手動寫漸層語法相當麻煩：角度、色標順序和百分比位置彼此牽動，一個小誤植就會悄悄弄壞整段 background。這個產生器讓預覽畫面與程式碼完全同步，你看到的就是逐字元對應的 CSS。整個運算都在用戶端完成，設計內容不會上傳到任何地方。
免費 CSS Gradient Generator（漸層產生器）
全程在瀏覽器裡執行，免上傳、免註冊。
類型
色標
CSS 程式碼
CSS gradient generator 是什麼？
CSS gradient generator 是一款視覺化工具，能自動產生 linear-gradient()、radial-gradient() 或 conic-gradient() 的程式碼。選好顏色、拖曳色標位置、設定角度，就能複製可直接貼上的 CSS，同時即時預覽會精準呈現瀏覽器實際渲染的畫面。整個過程都在瀏覽器裡完成。
使用方式
- 1選擇漸層類型. 選擇 linear、radial 或 conic。Linear 會顯示角度滑桿；radial 會多出形狀（circle 或 ellipse）與位置設定；conic 則有起始角度與位置。
- 2設定色標. 點選每個色塊選色，拖曳滑桿即可移動色標在漸層上的位置。最多可加到 8 個色標，或刪減到最少 2 個。
- 3調整方向. 拖曳角度滑桿（0 到 360 度），或直接選擇位置關鍵字，每次調整預覽都會立即更新。
- 4複製 CSS. 點擊複製即可取得完整的 background 宣告，其中包含純色備援，貼到你的樣式表就能使用。
適合誰用
- 前端工程師需要製作 hero 區塊、卡片或按鈕背景，想要精準的
linear-gradient()程式碼而不必死記語法。 - 網頁與 UI 設計師還原設計稿：先用視覺化方式重現漸層，再把產生的 CSS 直接交給工程團隊。
- 電子郵件與登陸頁製作者需要純色備援色，讓舊版信箱程式也能優雅降級顯示，輸出結果會自動附上這一行。
- 正在學 CSS 的學生想即時觀察角度、色標和漸層類型如何影響渲染結果。
常見問題
這個 CSS gradient generator 是免費的嗎？
是的，100% 免費，不用註冊、沒有浮水印、也沒有次數限制。想做多少漸層都可以，做好直接把 CSS 複製到專案裡使用。
會有任何內容被上傳到伺服器嗎？
不會。漸層的產生與預覽完全在你的瀏覽器裡以純 JavaScript 完成，顏色、程式碼或使用資料都不會傳到任何地方。
linear、radial 和 conic 漸層有什麼差別？
linear 漸層沿著你指定的角度、以直線方式混合顏色。radial 漸層則以圓形或橢圓形，從中心點向外擴散。conic 漸層讓顏色繞著中心點旋轉分布，就像色輪或圓餅圖一樣。
CSS 漸層裡的色標是怎麼運作的？
每個色標把顏色對應到漸層線上 0% 到 100% 之間的某個位置，瀏覽器會在相鄰色標之間做平滑混色。若把兩個色標放在同一位置，就會形成硬邊而不是漸變效果，很適合做出條紋或圓餅圖式的視覺效果。
哪些瀏覽器支援這些漸層？
所有主流瀏覽器，包括 Chrome、Firefox、Safari 和 Edge，都支援不需前綴的 linear-gradient() 與 radial-gradient()；conic-gradient() 則自 2020 年起就已全面支援。複製的程式碼也會附上純色備援，因應更舊的瀏覽器環境。
可以把產生的漸層當作文字顏色使用嗎？
不能直接套用，因為漸層是圖片而非顏色。做法是把漸層當作 background-image 套用到文字元素上，再加上 background-clip: text 與 color: transparent，讓漸層透過文字顯示出來。
為什麼我的漸層出現色帶（banding）？
當兩個距離較遠、色相相近的色標在很長的範圍內混色時，就容易顯現出 8 位元色階造成的色帶。可以透過加入中間色標、縮短混色距離，或選擇明度也有差異、而不只是色相不同的顏色來改善。