◩
圖片與設計工具
CSS Gradient Generator
CSS Gradient Generator 在瀏覽器中執行，用於檢查、轉換或準備結果，不會把輸入傳送到伺服器。
圖片與設計工具
Input / output
Color stops
Gradient preview
135deg
CSS code
background: linear-gradient(135deg, #18E299 0%, #2563EB 100%);
Tailwind background
bg-[linear-gradient(135deg,_#18E299_0%,_#2563EB_100%)]
HelpOpen usage notes, examples, practical tips, and FAQ only when you need them.
What is this tool?
CSS Gradient Generator 是用於圖片與設計流程的本機瀏覽器工具，輸入、選項與結果都在同一頁完成。
How to use it
- 貼上輸入
在輸入區域輸入或貼上要處理的值。
- 調整選項
選擇適合 CSS gradient, linear gradient, background 的模式、格式或單位。
- 檢查結果
執行工具，確認結果後再複製或下載。
Examples
CSS Gradient Generator 範例
- Input
- 範例輸入
- Output
- 在瀏覽器中檢查後的輸出。
Practical tips
- 內容較大時，先從小樣本開始。
- 廣告會保持在主要控制項和結果區域之外。
FAQ
CSS Gradient Generator 應該輸入什麼？
請輸入與頁面任務相符的值，並在執行前調整選項。
可以複製 CSS Gradient Generator 的結果嗎？
可以。檢查結果後即可複製或下載。
CSS Gradient Generator 支援行動裝置嗎？
支援。輸入、選項和結果會在小螢幕上縱向排列。
輸入會傳送到伺服器嗎？
不會。此工具設計為在瀏覽器內處理輸入。