🎚️CSS 濾鏡產生器

filter 的函數和單位

CSS 的 filter 屬性是應用於圖像或元素外觀效果的屬性，將 blur、sepia 等函數用半形空格分隔並並排書寫。

• px（像素）：blur 函數是用 px 指定模糊半徑的函數，指定 4px 時，半徑 4 像素的範圍內顏色會融合。
• %（百分比）：brightness 函數和 sepia 函數是用 % 指定效果強度的函數，brightness 函數中 100% 是原始亮度，120% 是亮度增加 20% 的狀態。
• deg（度）：hue-rotate 函數是用 deg 指定色相環上旋轉顏色角度的函數，指定 180deg 時，顏色會移至相對側的色相。

為什麼書寫順序會改變結果

filter 中並排的函數按左到右順序應用，前一個效果應用的結果上再應用下一個效果，因此更改排列順序時外觀也可能改變。例如先轉為黑白再套用褐色調會保留褐色調，先套用褐色調再轉為黑白則褐色調會消失。本工具中應用順序是固定的，但可以編輯生成的 CSS 代碼來改變順序。

backdrop-filter 的差異

filter 和 backdrop-filter 都可以使用相同的函數，但應用效果的對象不同。

• filter：filter 是對指定元素本身（圖像、文字等）的外觀應用效果的屬性。
• backdrop-filter：backdrop-filter 是對指定元素背後可見部分應用效果的屬性，常用於毛玻璃般的表現。