CSS 陰影產生器

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

CSS 陰影產生器

CSS 陰影產生器可在瀏覽器本地以視覺化方式調整 box-shadow 的水平位移、垂直位移、模糊半徑、擴散半徑、透明度與 inset 參數,並即時預覽卡片或按鈕的陰影效果。

如何使用?

  1. 調整水平位移、垂直位移、模糊半徑與擴散半徑。
  2. 選擇陰影顏色、背景顏色,並設定透明度與圓角。
  3. 依需求切換為 inset 內陰影效果。
  4. 把產生的 CSS 複製到元件樣式或設計交接文件中。

工具特性

  • 支援常見 box-shadow 參數視覺化調整
  • 支援外陰影與 inset 內陰影
  • 本地即時預覽並複製 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 漸層產生器

在瀏覽器本地建立 linear-gradient、radial-gradient、conic-gradient,支援顏色停靠點編輯、即時預覽與 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 下載。