Dev Tools
純前端檔案不上傳

CSS 漸層編輯器(linear / radial / conic 全支援)

三種漸層模式即時編輯 — 拖滑桿改角度 / 中心 / 起始角,色階任意增刪、改色、改位置,即時預覽 + 輸出 CSS / Tailwind v4 任意 class / SVG 漸層定義。

漸層類型
預覽
色階(可拖、可改色、可加減)
  • %
  • %
預設
輸出格式
css
background-image: linear-gradient(135deg, #ff0080 0%, #7928ca 100%);
›如何使用
  1. 上方選 漸層類型:Linear(線性)、Radial(放射)、Conic(圓錐 / 彩虹輪盤)。
  2. 右邊側欄調 角度 / 中心 / 形狀 等漸層幾何參數。三種類型有不同的可調選項。
  3. 下方 色階 區可任意拖滑桿改位置、點色塊改色、按 ✕ 刪除、按 +加一個。每個漸層至少要 2 個色階。
  4. Preset 列點任一個套用範例(日落 / Vaporwave / 極光 / 聚光燈 / 彩虹輪盤)。
  5. 底部 輸出 切 4 種格式:CSS block / CSS value / Tailwind v4 任意 class / SVG 定義。
Tips
  • Linear gradient 角度 CSS 規範是 0° = 向上,90° = 向右,跟我們直覺的時鐘方向一致(不是數學那種 0°=向右)。
  • Conic gradient 在 SVG 不原生支援,工具會輸出註解提示你改用 或 CSS background。
  • 多色階漸層 適合做 mesh gradient 替代品;放 5-7 個色階可以做出很滑順的效果。
  • Tailwind v4 起 bg-[...] 任意 class 支援所有 CSS gradient 函式,不用再寫自訂 utility。

相關工具