CSS 漸層與圖案
產生器
提供直覺介面的 CSS 漸層 (線性、放射狀、圓錐狀) 與圖案背景產生器。支援自由調整顏色節點、內建 24 種優美預設集與即時預覽功能。免費、免安裝、安全且完全在您的瀏覽器端運行。
編輯選取的顏色
產生的 CSS 程式碼
產生的 CSS 程式碼
關於 CSS 漸層與圖案產生器
「CSS 漸層與圖案產生器」是一款專為網頁開發者與設計師打造的免費工具。讓您能完全不透過 JavaScript 或外部圖檔，純粹使用 CSS 就能設計出絕美的漸層與圖案背景。透過直覺的圖形化介面 (GUI)，您可以輕鬆產生線性 (Linear)、放射狀 (Radial) 及圓錐狀 (Conic) 漸層，並立即將 CSS 程式碼應用於專案中。
除了支援複雜的顏色節點與透明度 (Alpha) 滑順調整，本工具還內建了 24 款經過設計師調校的預設漸層，以及 12 種常見的 CSS 圖案 (Pattern) 產生器。讓您在瀏覽器內就能順暢完成從設計構思到程式碼實作的所有流程。
使用方法
選擇漸層類型與基礎設定
在「漸層」分頁中選擇您要的表現方式：線性、放射狀或圓錐狀。線性漸層可調整角度滑桿；放射狀則可設定中心位置與形狀，決定光影與色彩散發的方式。
新增與編輯顏色節點
在漸層預覽橫軸上方點擊即可新增顏色節點 (Color Stop)。左右拖曳節點可調整漸層的平滑度，並利用下方的調色盤 (HEX 或 HSLA 滑桿) 精準調整色彩與透明度。
預覽結果與複製程式碼
右方的預覽區會即時呈現目前的設定結果。您可以點擊「全螢幕」按鈕確認大面積顯示的實際效果。確認無誤後，點擊下方「複製 CSS」，將產生的語法直接貼入您的樣式表即可。
漸層相關名詞解釋
- CSS 漸層 (CSS Gradient)
- 使用 CSS 的 linear-gradient() 或 radial-gradient() 等函數所繪製出的背景。因為不使用圖檔，能大幅減少伺服器請求，幫助提升網頁載入速度。
- 顏色節點 (Color Stop)
- 定義在漸層軸上特定位置 (0% 到 100%) 的基礎顏色。您可以藉由增加節點，或是將兩個不同顏色的節點靠攏，來創造出漸層中的清晰邊界 (Hard lines)。
- 線性漸層 (linear-gradient)
- 最常見的漸層方式，色彩會沿著單一角度 (例如 135deg) 或方向 (例如 to right) 進行直線式的漸變。
- 放射狀漸層 (radial-gradient)
- 色彩會以指定的中心點為基準，向外以圓形 (circle) 或橢圓形 (ellipse) 散發的漸層方式，常用來模擬光暈或光照效果。
- 圓錐狀漸層 (conic-gradient)
- 色彩會圍繞著中心軸順時針漸變的漸層方式。經常被用來純以 CSS 製作色相環、雷達圖或是圓餅圖。
- HSLA 顏色
- 透過色相 (Hue)、飽和度 (Saturation)、亮度 (Lightness) 及透明度 (Alpha) 四個數值來指定顏色的方式。相比於 HEX，更適合用來進行「調暗一點」或「鮮豔一點」這類直覺的微調。
常見問題
- Q.產生的漸層程式碼可以用在商業網站上嗎？
- 可以，完全開放商業使用。本工具產生的 CSS 程式碼沒有任何版權限制，無論是個人作品或企業專案皆可自由使用與修改。
- Q.可以使用手機操作本工具嗎？
- 沒問題。本工具具備完整的響應式設計 (RWD)，且拖曳顏色節點等操作都針對觸控螢幕進行了最佳化，讓您隨時隨地都能在手機上構思設計。
- Q.在較舊的瀏覽器 (例如 IE) 中無法正常顯示漸層。
- 舊版瀏覽器 (包含 IE11) 可能不支援現代的 CSS 漸層函數 (特別是 conic-gradient)。本工具產生的程式碼主要針對現代主流瀏覽器。為了相容性，建議您在 CSS 屬性前額外加入單一顏色的 `background-color` 作為後備 (Fallback) 樣式。
- Q.如何改變圖案背景 (Pattern) 的縮放比例？
- 請在「圖案」分頁中調整「圖案大小 (Size)」滑桿，產生的 CSS 程式碼會自動更新 `background-size` 屬性，藉此改變圖案重複的縮放比例。
- Q.可以將漸層直接存成圖片檔嗎？
- 本工具的核心目的是為了幫助開發者產生 CSS 程式碼，因此並未內建直接匯出 PNG 或 JPG 的按鈕。但您可以點擊「全螢幕預覽」，然後利用作業系統內建的螢幕截圖功能將漸層保存為圖片。
使用場景
首頁 Hero 區塊設計
在網站的第一視覺區塊 (Hero section) 使用粉彩色系或夕陽漸層，能為瀏覽者帶來強烈且具沉浸感的視覺印象。
實作毛玻璃 (Glassmorphism)
設定帶有低透明度的漸層背景，並搭配 CSS 的 backdrop-filter: blur() 屬性，就能快速打造現代感十足的毛玻璃 UI 組件。
輕量化背景圖案
利用純 CSS 實作圓點、斜紋等背景圖案，可省去載入外部圖片的時間，不僅提升設計豐富度，還能確保 PageSpeed 等效能指標不受影響。
簡易資料視覺化
圓錐狀漸層 (conic-gradient) 非常適合用來繪製簡單的圓餅圖或進度條，完全不需要依賴肥大的 JavaScript 圖表套件。
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.