ToolboxAgent

CSS 漸變生成器

在線 CSS 漸變生成器，支持線性漸變預覽、角度調節和 CSS 代碼複製。

.gradient-box {
  background: linear-gradient(135deg, #ff3300, #ccff00);
}

使用說明

  1. 1 選擇兩種顏色和漸變角度
  2. 2 預覽漸變效果
  3. 3 複製生成的 CSS 代碼

相關工具

Box Shadow 生成器

在線 Box Shadow 生成器，支持實時預覽陰影參數並複製 CSS 代碼。

顏色工具/拾色器

在線顏色拾取工具，支持HEX、RGB、HSL多格式互轉，實時預覽顏色效果

WCAG 顏色對比度檢測

實時計算前景色與背景色的 WCAG 對比度比值，標註 AA / AAA 通過狀態，並以按鈕、卡片、輸入框組件預覽效果。支持導出 CSS 變量。

在線白板/畫板

在線白板畫板工具，支持畫筆、橡皮擦、顏色選擇、筆刷粗細調節，可導出為PNG。

二維碼生成

輸入文本或鏈接，即時生成QR二維碼圖片，可下載PNG

關於此工具

CSS 漸變生成器通過可視化界面調節顏色斷點、漸變方向和過渡類型，實時預覽最終效果，並一鍵複製標準 CSS background-image: linear-gradient() 代碼，省去手寫漸變參數時反覆調試的過程。

適用場景：網頁 Banner 和 Hero 區塊的背景漸變設計、按鈕 Hover 效果的漸變背景、卡片陰影過渡色疊加、App 啟動屏的品牌色漸變，以及在 Figma 或 PS 原型還原為 CSS 代碼時精確匹配顏色過渡效果。

手寫 linear-gradient 代碼時，顏色的度數（angle）和色標百分比（color stop）位置很難憑直覺調準，而漸變的視覺感受與數值關係不直觀。本工具通過實時預覽大幅縮短「寫代碼—刷新瀏覽器—反覆調整」的迭代循環。

常見問題

linear-gradient 的角度 0deg 是什麼方向？ +

CSS 中 0deg 是從下到上（↑）的方向，與數學座標系不同。90deg 是從左到右（→），180deg 是從上到下（↓），270deg 是從右到左（←）。to top、to right、to bottom、to left 是等價的方向關鍵詞，但角度值更靈活，可以精確指定 45°、135° 等斜向漸變。

怎麼生成三種或更多顏色的漸變？ +

在 linear-gradient 中，每種顏色後面可以加一個百分比位置，例如：linear-gradient(90deg, #ff0000 0%, #ffff00 50%, #0000ff 100%)。百分比表示該顏色色標在漸變軸上的位置，不加百分比時會均勻分佈。

radial-gradient（徑向漸變）和 linear-gradient 有什麼區別？ +

linear-gradient 是沿直線方向過渡，產生條紋狀漸變；radial-gradient 是從中心點向外輻射擴散，產生圓形或橢圓形漸變效果。兩者語法相似，radial-gradient 額外支持指定形狀（circle/ellipse）和中心位置。

漸變背景在 Safari 上顯示不正常怎麼處理？ +

舊版 Safari（iOS 12 以下）需要 -webkit- 前綴：-webkit-linear-gradient()。現代 Safari（iOS 13+）已完整支持無前綴的標準語法。如果需要兼容舊設備，建議在 CSS 中同時寫入帶前綴和不帶前綴兩個版本，讓瀏覽器自動選擇。

漸變和圖片背景能疊加使用嗎？ +

可以。CSS background-image 屬性支持多層背景，用逗號分隔。例如：background-image: linear-gradient(rgba(0,0,0,0.5), transparent), url('photo.jpg'); 前面的漸變層會覆蓋在圖片上方，常用於為圖片添加半透明遮罩以便顯示上方的文字。