CSS 工作流程
CSS 影像濾鏡：順序、作用範圍與安全預覽
濾鏡串列會改變元素繪製後的外觀。先比較原圖與結果、保留指定順序，再到實際元件檢查；預覽不是效果或安全性的保證。
內容更新： · 維護者與修正回報
每個濾鏡處理上一步的結果
CSS 濾鏡依書寫順序由左至右套用。grayscale(100%) sepia(100%) 先移除色彩，再將結果染成棕褐色；sepia(100%) grayscale(100%) 則以灰階結束。即使數值相同，改變順序也可能改變結果。這是影像處理，不是變形矩陣的順序。
本工具允許九種函式各一個，依清單順序輸出已啟用的步驟；停用數值保留但不參與結果。CSS 本身可以重複同一函式，但本工具不處理重複實例或任意 CSS 匯入。
濾鏡作用於元素及其後代
filter 會把元素內容、背景、邊框及後代一起處理。套用在卡片上，也可能模糊文字與控制項；只想調整照片時，請套用於該圖片或專用包裝元素。backdrop-filter 處理的是元素後方的背景，本工具不產生此屬性。
非 none 的 filter 會建立堆疊環境，且除了文件根元素，也會為絕對與固定定位後代建立包含區塊。已啟用的 brightness(100%) 雖然外觀中性，仍不會被替換成 none；只有全部停用才輸出 filter: none;。請在實際元件檢查定位子元素。
分別檢查模糊、透明與裁切
blur() 接受非負長度，不接受百分比；長度表示高斯標準差，不是 box-shadow 的模糊半徑。模糊繪製可能超出元素，但不預留新的版面空間；預覽展示框可能裁掉外溢，本工具不匯出 overflow 規則。
opacity() 是濾鏡串列的一部分，CSS opacity 屬性則在濾鏡之後合成。預覽棋盤格在濾鏡外，讓透明區域保持可辨識。濾鏡可能降低文字可讀性；裝飾比較不是 WCAG 合格證明，請檢查實際內容、焦點、縮放與支援瀏覽器。
工具範圍不是完整 CSS 語法
本工具接受模糊 0–20px；亮度、對比與飽和度 0–300%；灰階、反相、不透明度與棕褐色 0–100%；色相旋轉 −360–360deg。最多一位小數，不附帶單位。CSS 在部分情況允許更廣範圍，包括超過 100% 的亮度與超過一圈的角度。
空白、科學記號、非有限數值、附帶單位、過多小數與超界值會被拒絕，不默默修正。啟用欄位無效時，結果預覽、程式碼與複製都會停止；停用該步驟就排除其值。方向鍵微調 0.1，Shift 為 1。預設重設數值與順序但保留圖片；重設全部也會回到範例圖。
本機讀取仍需要解碼
檔案選擇器接受最多 4 MiB 的 PNG、JPEG 與 WebP。MIME 與檔頭檢查是格式檢查，不是安全證明。原生 createImageBitmap 仍須解碼檔案，損壞或不支援的資料可能失敗。解碼後，每邊最多 4096px、總像素最多 4MP；預覽按比例縮小至最大邊長 1024px。
動畫格式只使用預設影像或第一幀，不播放動畫。瀏覽器原生解碼、方向、色彩管理與縮圖可能和修圖軟體或其他瀏覽器不同。像素限制在解碼後才確認，無法保證完全防止尖峰記憶體；大型圖片請先縮圖。本工具不提供自製解碼器。
模糊不是敏感資料遮蔽；清楚保留隱私界線
CSS 模糊與透明度是可移除的展示設定，不是敏感資料遮蔽；原始圖片與內容仍可取得。發布頁面時，不要用它們隱藏帳密、個人記錄或其他敏感資料。
圖片內容、檔名與濾鏡參數不上傳、不持久儲存、不寫入網址，也不送入輸入分析；既有核准的站級分析仍可能運作。更換圖片、重設與離頁時釋放 bitmap，較早的待解碼圖片不能覆蓋較新的選擇。讀取失敗會明確回到範例；只複製目前的 filter 宣告，不提供圖片、EXIF 移除或編輯檔案輸出。
.image { filter: grayscale(100%) sepia(100%); }
/* 反向順序以灰階結束。 */
.image-reversed { filter: sepia(100%) grayscale(100%); }
/* 外觀中性，但不是 none。 */
.neutral { filter: brightness(100%); }
.unfiltered { filter: none; }資料可信度