簡化您的工作流程：搜尋 miniwebtool。
添加插件
你可能也用得上
色彩方案生成器調色盤產生器CSS Flexbox 演練場CSS Grid 生成器CSS壓縮器Less 到 CSS 編譯器
主頁 > 雜項 > 顏色工具 > 漸變產生器
 

漸變產生器

專業的 CSS 漸變產生器，具備互動式顏色停靠點、角度控制、預設漸變，以及可用於 CSS、Tailwind 和 SVG 的即時代碼匯出功能。

漸變產生器
卡片
按鈕
起始顏色
結束顏色
顏色停靠點 點擊以添加停靠點
角度
90°
快速角度
漸變預設集

        

        

        
      

    

  



 
Embed 漸變產生器 Widget
 
  
  
  
 
    
 
 
  
 
 
  
	




 
 
漸變產生器 
 

歡迎使用漸變產生器，這是一款專業級的設計工具，用於創建美觀的 CSS 漸變。無論您是需要為網站設置精緻的背景漸變、充滿活力的按鈕效果，還是引人注目的主視覺區塊，此工具都能透過即時預覽和多種導出格式為您提供全面的創意控制。



核心功能



互動式顏色停靠點


點擊漸變條上的任何位置即可添加新的顏色停靠點。拖動停靠點以重新定位，從而創建平滑的過渡或銳利的顏色邊界。將鼠標懸停在中間的停靠點上並點擊出現的刪除按鈕即可將其移除。



精確角度控制


使用直觀的角度撥盤設置精確的漸變方向，或從預設角度（0°、45°、90°、135°、180°、225°、270°、315°）中選擇常用方向。視覺化撥盤讓您能夠微調角度，獲得畫素級完美的結果。



精選漸變預設集


從 16 種專業設計的漸變預設集開始，包括受歡迎的紫色迷霧 (Purple Haze)、海洋藍 (Ocean Blue)、清新薄荷 (Fresh Mint) 和霓虹 (Neon)。每個預設集都可以作為您進一步自定義的起點。



多種導出格式




如何使用此工具


    
  
  1. 選擇漸變類型： 選擇「線性」用於方向性漸變，或選擇「放射狀」用於圓形漸變。
    2. 
  
  2. 挑選顏色： 使用顏色選取器或直接為起始和結束顏色輸入十六進制值 (Hex)。
    3. 
  
  3. 設置角度： 對於線性漸變，拖動角度撥盤或點擊預設角度。
    4. 
  
  4. 添加顏色停靠點： 點擊漸變條以添加中間色，從而創建複雜的漸變。
    5. 
  
  5. 預覽： 即時查看您的漸變更新。切換形狀疊加層，查看其在 UI 元素上的呈現效果。
    6. 
  
  6. 導出： 一鍵複製 CSS、Tailwind 或 SVG 代碼。
    7. 




瞭解 CSS 漸變



線性漸變 (Linear Gradients)


線性漸變沿著直線過渡顏色。角度決定了方向：



background: linear-gradient(angle, color-stop1, color-stop2, ...);





提示： 0° 指向上，90° 指向右，180° 指向下，270° 指向左。您可以使用 0° 到 360° 之間的任何角度。




放射狀漸變 (Radial Gradients)


放射狀漸變從中心點以圓形或橢圓形模式向外過渡顏色：



background: radial-gradient(shape, color-stop1, color-stop2, ...);




顏色停靠點 (Color Stops)


顏色停靠點定義了每種顏色在漸變中出現的位置。它們由顏色值和可選的位置百分比組成：




漸變設計最佳實踐



色彩和諧




無障礙考量




性能提示




常見漸變模式



按鈕漸變


按鈕通常使用微妙的漸變，向頂部變亮，營造出「凸起」的 3D 效果。使用 180° 左右的角度（從上到下），並將較淺的顏色設在 0%。



背景漸變


全頁背景通常使用對角線漸變（135° 或 45°），並搭配柔和、柔和的顏色，以免干擾內容。



卡片疊加層


圖片卡片通常使用從透明過渡到深色的漸變，使白色文字在照片上清晰易讀。



常見問題解答



什麼是 CSS 漸變？


CSS 漸變是兩種或多種顏色之間的平滑過渡，可用作背景圖像。CSS 支援線性漸變（顏色沿直線流動）、放射狀漸變（顏色從中心點向外輻射）和圓錐漸變（顏色繞中心旋轉）。漸變與解析度無關，在所有螢幕尺寸上都能清晰呈現。



線性漸變和放射狀漸變有什麼區別？


線性漸變沿著指定角度的直線過渡顏色（例如從上到下、從左到右或對角線）。放射狀漸變則從中心點以圓形或橢圓形向外過渡顏色。線性漸變非常適合背景和按鈕，而放射狀漸變則可營造聚光燈或發光效果。



如何在漸變中使用顏色停靠點？


顏色停靠點定義了每種顏色在漸變中出現的位置，並可以包含位置百分比。例如，「linear-gradient(90deg, red 0%, yellow 50%, green 100%)」將紅色放在起點，黃色放在中間，綠色放在終點。調整停靠點位置可以創建更平滑或更銳利的顏色過渡。



我可以在 Tailwind CSS 中使用漸變嗎？


是的，Tailwind CSS 透過工具類別支援漸變，例如使用「bg-gradient-to-r」表示方向，以及「from-color」、「via-color」、「to-color」表示顏色。對於具有特定十六進制顏色的自定義漸變，您可以使用任意值，如「bg-[linear-gradient(90deg,#ff6b6b,#4ecdc4)]」或在 Tailwind 配置中定義自定義顏色。



漸變角度是如何運作的？


CSS 中的漸變角度從頂部開始（0deg 向上）並順時針旋轉。因此，90deg 指向右側，180deg 指向下側，270deg 指向左側。您還可以使用關鍵字，如「to right」 (90deg)、「to bottom」 (180deg) 或「to top left」用於對角線漸變。



CSS 漸變比漸變圖片好嗎？


CSS 漸變與圖片文件相比有幾個優點：它們與解析度無關（在 Retina 螢幕上始終清晰）、不需要 HTTP 請求（加載速度更快）、可以無限縮放而無品質損失、易於在代碼中編輯，且佔用頻寬更少。為了獲得更好的性能，請盡可能使用 CSS 漸變。



其他資源


 
                          
引用此內容、頁面或工具為：
"漸變產生器" 於 https://MiniWebtool.com/zh-tw/漸變產生器/，來自 MiniWebtool，https://MiniWebtool.com/ 

由 miniwebtool 團隊製作。更新日期：2026年1月23日

 
 
 
                          
  
 
 
 
 
  
 
 
  
 
 
 
  
    
 
 
顏色工具:


 
 
  
 
 
 
   
   
   
常用工具:

            
分數計算機隨機撲克牌產生器真心話大冒險產生器相對標準差計算機比例計算機百分比增加計算機羅馬數字轉換器斜邊計算機kpa到psi轉換器百分比增長率計算機最簡分數計算機百分比折扣計算機圓計算機🎮 遊戲靈敏度轉換器質數分解計算機年齡計算機隨機餐點產生器公斤轉磅轉換器百分比減少計算機校正鈣計算機Instagram使用者ID查詢磅轉公斤轉換器毛利率計算機太陽、月亮與上升星座計算機 🌞🌙✨隨機信用卡生成器凱薩密碼工具🌡️ 體感溫度計算機圖片分割器AI內容檢測器MAC地址查找簡單利息計算機影片轉圖片擷取器📅 日期計算機ANC計算機SRT時間偏移商和餘數計算機組合計算機坡度與傾斜度計算機百分比變化計算機二次公式計算機調整影片速度Bar to PSI 轉換器合併影片定期存款計算機樂透號碼生成器對數計算機工作搜尋器質數檢查器隨機選擇器隨機名稱生成器查找並替換文字分數百分比轉換器年份天數計算機 - 今天是今年的第幾天平均值計算機反向文字亂數學題產生器CAGR計算機隨機字母生成器心算訓練器YouTube頻道統計複利計算機psi到kpa轉換器FPS 轉換器小字體生成器 ⁽ᶜᵒᵖʸ ⁿ ᵖᵃˢᵗᵉ⁾百分比誤差計算機分數到小數計算機最小公倍數計算機百分比到ppm轉換器總和計算機音訊分割器比率與百分比計算機加價計算機因子計算機⏱️ 小時計算機標準差計算機 - 高精度隨機化數字跑步配速計算機畢達哥拉斯定理計算機迷宮產生器HEX計算機棒球打擊率計算機ERA計算機cpm計算機直角三角形計算機橢圓 周長計算機賓果卡生成器兩點間距離計算機影片壓縮器剪刀石頭布產生器SRT轉換為TXT工具圖片打碼工具科學記數法計算機隨機英文單字產生器愛情兼容性計算機HEX轉換器我的幸運數字是什麼弧長計算機文字重複工具百分比計算機🌐 時區轉換器壓力轉換器💧 露點計算機小數到分數計算機星期幾計算機速度計算機鋼材重量計算機影片分割器MAC地址產生器刪除線文字產生器文件大小轉換器純利潤計算機上壘率計算機摩爾斯電碼生成器發音音標轉換器隨機時間生成器可整除測試計算機樓梯計算機條碼產生器鋼筋計算機填字遊戲製作器步數距離計算機隨機生日生成器隨機錦標賽對陣生成器克到磅轉換器週數計算機多分數計算機汽車折舊計算機刪除換行符棒球長打率計算機YouTube收益估算器投球命中率計算機斜率計算機演講時間計算機OPS計算機為影片新增浮水印線規計算機Zalgo文字生成器平方根計算機扭力轉換器 (Nm, ft-lb, kgf-cm)階乘計算機隨機日期生成器RC時間常數計算機正方形計算機汽車貸款計算機線性迴歸計算機數獨產生器與求解器PSI 轉 Bar 轉換器橢圓面積計算機行數統計工具角度轉換器校正鈉計算機隨機顏色生成器中位數計算機保齡球計分計算機月亮星座計算機速度轉換器厘米到英尺和英寸轉換器積分計算機騎行速度計算機體積轉換器Facebook使用者ID查詢WHtR計算機比率計算機⏱️ 倒數計時器質數列表農曆轉換器指數計算機（高精度）獲取字串長度YouTube縮圖下載器黃金比例計算機互動式元素週期表出生星期計算機屋頂坡度計算機磅到克轉換器磚塊與砂漿計算機移除標點符號線上工具AI標點符號添加器SRT合併工具刪除空格正多邊形計算機隨機超能力產生器GUID / UUID 生成器Log Base 10 計算機日曆One Rep Max (1RM) 計算機分數簡化十進製到科學記數法轉換器土星回歸計算機三相功率計算機四捨五入計算機歐姆定律計算機姓名靈數計算機隨機座標產生器APR 計算機kVA計算機刪除空行隨機IMEI產生器預產期計算機🖱️ 點擊計數器直方圖製作器遊戲暱稱產生器團隊名稱產生器暱稱產生器饒舌藝名產生器樂團名稱產生器奇幻名字產生器幸運餅乾產生器繪畫創意產生器日記提示產生器每日肯定語產生器讚美產生器搭訕台詞產生器老爸笑話產生器隨機笑話產生器隨機冷知識產生器趣味問答題產生器猜詞遊戲單字產生器你畫我猜詞語產生器猜詞遊戲產生器破冰問題產生器我從來沒有產生器二選一問題產生器隨機問題產生器AI解夢AI感謝函產生器AI婚禮致詞生成器AI新聞稿生成器AI產品描述產生器AI影片腳本產生器AI YouTube 標題與描述產生器AI Instagram標題產生器AI LinkedIn標題和簡介產生器AI履歷要點生成器AI求職信產生器AI饒舌歌詞生成器PDF展平工具PDF解鎖（移除擁有者密碼）PDF轉文字擷取器擷取PDF頁面PDF字數統計PDF加密為PDF加入頁碼重新排序PDF頁面刪除PDF頁面旋轉PDFJPG轉PDFPDF轉JPG壓縮PDF分割PDF合併PDFPT轉PX轉換器PX轉REM轉換器托拉轉克轉換器印度土地單位轉換器微克轉毫克轉換器AI歌詞產生器AI詩歌產生器AI故事產生器AI翻譯器AI文字摘要工具毫克到毫升轉換器英里每小時轉公里每小時轉換器節到英里每小時轉換器立方公尺轉立方英尺立方英尺轉立方碼轉換器平方英尺轉平方公尺轉換器平方公尺轉平方英尺轉換器盎司轉毫升轉換器毫升轉盎司轉換器加侖轉公升轉換器公升到加侖轉換器公斤到英石轉換器英石轉公斤轉換器英吋到毫米轉換器毫米到英寸轉換器英里轉公里轉換器公里轉英里轉換器華氏度到攝氏度計算機攝氏度轉華氏度轉換器背包尺寸計算機衝浪板體積計算機網球握把尺寸計算機頭盔尺寸計算機手套尺寸計算機帽子尺寸轉換器滑雪板尺寸計算機滑雪尺寸計算機自行車尺寸計算機速通分段計時器斯特伯福計分計算機飛鏢殘局計算機板球投球經濟率計算機擊球率計算機淨得分率計算機K/D 比率計算機Elo 等級分計算機心率恢復計算機健行時間計算機划船配速計算機跑步年齡分級計算機FTP功率區間計算機Beep 測試計算機ACFT 分數計算機Wilks 與 DOTS 計算機輪圈偏移量計算機輪胎負載指數與速度等級查詢每英里成本計算機租賃買斷計算機辛烷值混合計算機二衝程機油混合計算機引擎排氣量計算機沙發過門計算機木柴考得計算機空氣清淨機cadr計算機除濕機尺寸計算機吊扇尺寸計算機窗簾尺寸計算機地毯尺寸計算機掛畫高度計算機電視安裝高度計算機電視尺寸計算機池塘容積與襯墊計算機泳池鹽量計算機泳池容積計算機熱水器尺寸計算機環氧樹脂計算機欄杆立柱間距計算機踢腳板與飾條計算機壁板計算機露臺木器染色劑計算機草籽計算機草皮計算機瀝青計算機立方碼計算機天線長度計算機電線管填充率計算機串聯並聯電容計算機感抗計算機房間照明計算機勒克斯轉流明計算機流明轉瓦特轉換器發電機功率計算機mah到wh轉換器安培轉瓦特計算機瓦特轉安培計算機串聯電阻計算機摩擦力計算機斜面計算機機械利益計算機聲速計算機波速計算機浮力計算機終端速度計算機德布羅意波長計算機光子能量計算機emc2計算機時間膨脹計算機克卜勒第三定律計算機逃逸速度計算機萬有引力計算機比爾-朗伯定律計算機能斯特方程式計算機滲透壓計算機沸點上升計算機凝固點下降計算機百分比組成計算機當量濃度計算機重量莫耳濃度計算機pKa到Ka轉換器亨德森-哈塞爾巴爾赫計算機理論產量計算機限量試劑計算機電子組態計算機AI教案產生器AI測驗產生器引用產生器 (APA/MLA/Chicago)出席率計算機AP分數計算機ACT分數計算機SAT分數計算機隨機RPG角色生成器