CSS 漸層產生器

在瀏覽器本地建立 linear-gradient、radial-gradient、conic-gradient，支援顏色停靠點編輯、即時預覽與 CSS 複製。

CSS 漸層產生器

CSS 漸層產生器可在瀏覽器本地以視覺化方式建立 linear-gradient、radial-gradient 與 conic-gradient，支援編輯多個顏色停靠點、調整角度與位置，並直接複製 CSS 背景程式碼。

如何使用？

  1. 選擇線性、徑向或圓錐漸層類型。
  2. 調整角度、形狀、起始位置與顏色停靠點。
  3. 在預覽區查看實際漸層效果。
  4. 把產生的 CSS 複製到頁面樣式或設計交接文件中。

工具特性

  • 支援三種常見 CSS 漸層類型
  • 支援多顏色停靠點編輯與即時預覽
  • 本地產生 CSS，不需上傳任何設計資料

為什麼使用這個工具？

  • 快速製作按鈕、卡片、橫幅與首屏背景漸層
  • 減少手寫漸層語法與反覆試錯時間
  • 方便設計與前端協作時直接複製可用程式碼

相關顏色工具

GIF 製作

將多張靜態圖片或影片片段轉換為動態 GIF。

圖片尺寸調整

批次調整圖片尺寸，支援像素或百分比縮放、鎖定比例與本地下載。

圖片轉 ICO

將圖片轉換為 favicon 或應用圖示常用的 ICO 檔案，並支援多尺寸打包。

SVG 轉 PNG/JPG

將 SVG 匯出為 PNG 或 JPG，支援自訂尺寸、背景色與本地下載。

SVG 優化器

本地 SVG optimizer 思路，在瀏覽器本地壓縮 SVG 程式碼、清理中繼資料並輸出優化版本。

EXIF 查看器

本地 exif-viewer 思路，在瀏覽器本地讀取圖片中的 EXIF、GPS、相機和拍攝參數。

圖片中繼資料清理

本地 image-metadata-cleaner 思路，在瀏覽器本地移除 JPEG、PNG、WebP 中的 EXIF、XMP、ICC 等中繼資料。

圖片調色盤提取

本地 image-palette-extractor 思路，從圖片中提取主色、占比和調色盤，並匯出 HEX、CSS 或 JSON。

取色器

在瀏覽器本地從手動輸入、螢幕或上傳圖片中取色，並查看 HEX、RGB、HSL、HSV、CMYK 與 CSS 值。

顏色轉換器

在瀏覽器本地於 HEX、RGB、HSL、HSV、HWB、LAB、LCH、CMYK 與 CSS 關鍵字之間做雙向顏色轉換，並支援 Alpha 通道。

顏色對比度檢查器

在瀏覽器本地檢查前景色與背景色的 WCAG 對比度，並判斷一般文字與大字體的 AA / AAA 通過狀態。

CSS 陰影產生器

在瀏覽器本地調整 box-shadow 位移、模糊、擴散、透明度、圓角與 inset，支援即時預覽與 CSS 複製。

HTML 顏色名稱

在瀏覽器本地瀏覽與搜尋 HTML / CSS 命名顏色，並複製顏色名稱、HEX 或 RGB。

favicon 產生器

從一張圖片產生常用 favicon 資源、site.webmanifest 與 HTML 引用片段。

Gemini 浮水印去除

在瀏覽器本地去除 Gemini 可見浮水印，支援批次處理與下載。

圖片轉 AVIF

將 PNG、JPG 等圖片批次轉換為 AVIF，支援品質、縮放比例與 ZIP 下載。

PNG 壓縮器

壓縮 PNG 體積並保留 PNG 輸出，支援縮放、減少顏色數量、預覽與 ZIP 下載。

圖片轉 WebP

將 PNG、JPG 等圖片批次轉換為 WebP，支援品質、縮放比例、預覽與 ZIP 下載。