⚡全部工具 💻開發者與編碼 📝文字與內容 🎨設計與色彩 🖼️圖片與多媒體 🔢數據與計算 🔒安全與密碼 📄PDF 工具 📐單位與進度轉換

CSS 漸層產生器

視覺化即時調校線性與放射性漸層，提供質感模板並快速複製 CSS 代碼。

漸層類型

旋轉角度 135°

漸層顏色節點 (Color Stops)

顏色

不透明度 100%

質感漸層模板

即時效果預覽

CSS CODE

background: linear-gradient(135deg, #f59e0b 0%, #10b981 100%);

使用方式

1 開啟CSS 漸層產生器，輸入、貼上或選擇要處理的內容。
2 依需求調整頁面上的選項與格式。
3 確認即時結果，再複製或下載可用的輸出。

適合的使用情境

視覺化即時調校線性與放射性漸層，提供質感模板並快速複製 CSS 代碼。適合日常工作、開發、學習或快速驗證時使用。

隱私與資料處理

工具在瀏覽器中運作；處理敏感資料前，仍請確認瀏覽器與裝置環境可信。

linear-gradient 與 radial-gradient 的寫法與技巧

CSS 漸層是由瀏覽器即時繪製的「圖片」，可以直接放在 background 或 background-image 中，不需要額外下載圖檔，放大縮小也不會模糊。線性漸層寫法是 linear-gradient(角度, 色標1, 色標2, …)：0deg 代表由下往上，90deg 由左往右，預設的 180deg 是由上往下；135deg 則是常見的左上到右下斜角。放射漸層 radial-gradient 從中心向外擴散，適合做聚光、光暈或按鈕的立體感。

「色標」由顏色與位置組成，例如 #f59e0b 0%、#10b981 100%。中間加入更多色標可以控制過渡節奏；如果兩個色標放在同一個位置（例如 50% 與 50%），顏色就會瞬間切換，形成俐落的條紋或分割效果。本工具的每個色標都能調整位置與透明度，透明度會輸出成 rgba() 色碼，可用來做圖片上方的漸層遮罩，讓白色文字在照片上依然清楚。

實務上幾個小技巧：大面積的兩色漸層若兩端色相差太遠，中間容易出現灰濁色帶，可以在中間加一個過渡色，或選擇色相相近的顏色；淡色漸層在部分螢幕上可能看到一階一階的色帶（banding），稍微加大色差或加入第三個色標即可改善。想做漸層文字，可以把漸層設為背景，再搭配 background-clip: text 與 color: transparent。

現代瀏覽器早已支援不加前綴的 linear-gradient 與 radial-gradient，複製出來的 CSS 可以直接使用，不需要 -webkit- 前綴。預設模板提供幾組常用配色，選好後再微調角度與色標，即時預覽確認效果後一鍵複製。