CSS 漸變生成器

← ToolBox / CSS 漸變生成器
📖 檢視「CSS 漸變生成器使用指南」

🌈 CSS Gradient Generator

90°
📐 計算公式 / 原理
把起止顏色、角度與顏色停靠點拼裝為 linear-gradient / radial-gradient 宣告，即時預覽並複製；用於網頁背景與按鈕配色。

✨ 預設漸變

📚 深度解析：CSS 漸變生成器

💡 常見使用場景

  • 做按鈕、橫幅背景。
  • 卡片漸變描邊。
  • 品牌漸變。
生成橙紫線性漸變
<p><strong>輸入：</strong>135°、#FF6B35→#7C3AED。</p><p><strong>處理：</strong>拼 linear-gradient。</p><p><strong>輸出：</strong>CSS 與預覽。結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。</p>

❓ 常見問題（FAQ）

角度怎麼算？
0° 向上，90° 向右，順時針；可用 to 關鍵詞。結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。
兩種色對比度不夠會提示嗎？
會按 WCAG 算出對比度值與等級，未達標會標紅提醒，便於及時換色或調深。
會儲存或上傳我的內容嗎？
結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。
⚠️ 使用說明與注意事項

🔗 相關工具

📈 CSS動畫生成器（關鍵幀視覺化） - 免費線上工具，純前端處理 | ToolBox免費線上工具箱CSS動畫生成器（關鍵幀視覺化） 🎵 Web Audio 節拍器 - 免費生成器工具，線上節拍器 | ToolBox免費線上工具箱線上節拍器 🔳 二維碼生成器（已有，可加強定製） - 免費線上工具，純前端處理 | ToolBox免費線上工具箱二維碼生成器（已有，可加強定製） 🏷️ 條形碼生成器（EAN-13等） - 免費線上工具，純前端處理 | ToolBox免費線上工具箱條形碼生成器（EAN-13等） 📈 盒子陰影生成器（視覺化調整） - 免費線上工具，純前端處理 | ToolBox免費線上工具箱盒子陰影生成器（視覺化調整）
📖關於「CSS 漸變生成器」 ▼

📝工具簡介

Configure the start and end colours, angle and stops of a linear or radial gradient and copy the resulting CSS gradient code.

✨功能特點

🎯使用場景