CSS 影像濾鏡產生器：比較與順序調整

比較九種 CSS 影像濾鏡、調整套用順序，在本機預覽圖片而不上傳，並複製目前的 filter 宣告。

02 / 原生比較

同一張圖片，原圖與結果

內建範例 · 包含色彩、細節與透明區域

原圖

結果 · 匯出此組

選擇本機圖片

PNG／JPEG／WebP，最多 4 MiB、4096px 邊長及 4MP。動畫只取預設影像或第一幀。只在本機讀取；不輸出圖片。

兩邊使用相同預覽尺寸；棋盤格不受濾鏡影響。展示框可能裁掉模糊外溢，不匯出 overflow。縮圖、色彩管理及瀏覽器差異可能影響外觀。

04 / CSS

filter: none;

只複製 filter 宣告，不含圖片、預覽尺寸、底色或裁切設定。設定只留在此頁，不上傳、不儲存、不寫入網址；既有站級分析仍可能運作，不傳送圖片、檔名或參數。

03 / 順序與精度

依清單編號順序套用，對應 CSS 由左至右的書寫順序；每一步處理上一步的結果。每種最多一個。

勾選啟用後即可編輯；停用數值保留，但不參與結果或驗證。

模糊 (px)

0–20px，最多一位小數，不加單位。

方向鍵微調 0.1，Shift 為 1。空白、科學記號、附帶單位與超界值不會默默修正；這是工具範圍，不是 CSS 上限。

模糊不是敏感資料遮蔽；原始內容仍存在。本工具不是修圖軟體或 WCAG 合格證明。圖片解碼後才確認像素限制，無法保證完全防止尖峰記憶體；大圖請先縮圖。

從預設開始，或選擇本機 PNG、JPEG、WebP 圖片。勾選啟用濾鏡，選取後調整數值及上下順序；以相同尺寸比較原圖與結果，再複製 CSS。只輸出已啟用且有效的數值。

這不是修圖軟體、敏感資料遮蔽工具或無障礙合格證明。不匯入任意 CSS、不輸出圖片、不播放濾鏡動畫，也不產生 backdrop-filter、drop-shadow 或 SVG 濾鏡。請在實際元件檢查色彩、裁切、堆疊與定位子元素。