漸變生成器

調整漸變顏色和效果,預覽漸變背景,生成網頁可用的 CSS。

免費瀏覽器

線性

簡單的方向漸變

預覽
顏色色標

#2563eb 0%, #ec4899 100%

形狀
CSS 背景
background:
  linear-gradient(135deg, #2563eb 0%, #ec4899 100%);

關於漸變生成器

預覽雙顏色線性漸變並複製 CSS 背景聲明。調整顏色和角度,為頁面背景或組件強調區域準備樣式。

如何使用漸變生成器

  1. 選擇起始色和結束色。
  2. 調整漸變角度,檢查預覽。
  3. 複製生成的 CSS 到樣式表。

輸入與輸出示例

輸入與設置
起始:#ff0000
結束:#0000ff
角度:90°
預期輸出
linear-gradient(90deg, #ff0000, #0000ff)

適用場景

  • 探索落地頁背景方案。
  • 為卡片準備漸變強調色。

使用前需要了解的限制

工具專注於雙顏色線性漸變,不覆蓋完整漸變編輯功能,也不檢查整個背景上各點的文字對比度。

數據處理與費用

核心操作在瀏覽器中完成,工具輸入不會上傳處理。網站仍可能使用會話 Cookie,並按隱私政策收集運行或使用數據。

在瀏覽器中免費使用,無需登錄。

常見問題

工具會生成線性、徑向、錐形、多層、網格、極光、金屬等現代漸變風格的 CSS background 值。

可以。複製生成的聲明後,可用於 CSS background 或 background-image 屬性。

是的。預覽和 CSS 生成都在瀏覽器本地完成,不上傳顏色值。

相關工具