CSS 漸變生成器

🌈 CSS Gradient Generator

90°

🎨 預設漸變

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

💡 常見使用場景

  • 生成線性/徑向漸變背景
  • 調品牌漸變、按鈕高光
  • 做漸變文字(background-clip:text)
線性漸變
linear-gradient(135deg, #ff7e5f, #feb47b) 表示從左上到右下的橙粉漸變;角度 0deg 朝上、90deg 朝右。可加多個停靠點控制色彩分佈。
徑向漸變
radial-gradient(circle at 30% 30%, #fff, #ddd) 以左上 30% 為圓心的同心圓漸變,適合做高光球或光暈。
漸變文字
background: linear-gradient(...); -webkit-background-clip: text; color: transparent; 把漸變裁到文字形狀,得到彩色字。

❓ 常見問題(FAQ)

角度怎麼定方向?
linear-gradient 的角度指漸變線方向,0deg 從下往上、90deg 從左往右、135deg 左上到右下。也可直接用 to right / to bottom 等關鍵字。
為什麼漸變文字有時不顯示?
需同時設 -webkit-background-clip: text 與 color: transparent,且背景為漸變;部分舊瀏覽器僅支持帶 -webkit- 前綴。
⚠️ 使用説明與注意事項
📖關於「CSS 漸變生成器」

📝工具簡介

CSS Gradient Generator is available directly in your browser, with no data uploaded.

功能特點

🎯使用場景

💬常見問題

這個工具是免費的嗎?
完全免費,無需註冊,直接在瀏覽器中使用。
生成的代碼可以直接用嗎?
可以,生成的 CSS 代碼符合標準,可直接複製到項目中使用。
支持自定義參數嗎?
支持,提供多種參數調節選項,滿足個性化設計需求。