filter 會影響元素的子項目嗎？

會。filter 套用在整個元素及其所有子節點上，而且會建立新的 stacking context 與 containing block，可能影響 position: fixed 的子元素定位。只想處理背景時請改用 backdrop-filter。

濾鏡的順序有差嗎？

有。濾鏡是依序套用的，先灰階再提高對比，和先提高對比再灰階，結果並不相同。這個工具固定使用一致的順序，讓預覽和複製到的 CSS 永遠一致。

CSS / FRONTEND · 瀏覽器內處理

調整模糊、亮度、對比、飽和度等濾鏡並即時比對效果。

只輸出與預設值不同的濾鏡函式，複製到的 CSS 不會有多餘內容。

預覽底色

淺色深色透明

Tooloo

原圖

Tooloo

套用後

filter: none;

模糊

亮度

對比

灰階

色相旋轉

反相

不透明度

飽和度

復古

把模糊、亮度、對比、灰階、色相旋轉、反相、透明度、飽和度與復古色調全部放在同一組滑桿上，預覽會依照 CSS 規定的順序套用。工具只會輸出真正偏離預設值的函式，所以複製到的 filter 宣告永遠是最短的版本，不會塞滿一堆 100% 的無效果設定。

所有計算與預覽都在這個瀏覽器內完成，輸入不會上傳、不會保存，也不會寫進網址或紀錄。

filter 會影響元素的子項目嗎？: 會。filter 套用在整個元素及其所有子節點上，而且會建立新的 stacking context 與 containing block，可能影響 position: fixed 的子元素定位。只想處理背景時請改用 backdrop-filter。
濾鏡的順序有差嗎？: 有。濾鏡是依序套用的，先灰階再提高對比，和先提高對比再灰階，結果並不相同。這個工具固定使用一致的順序，讓預覽和複製到的 CSS 永遠一致。