CSS Filter Generator

關於本工具

CSS濾鏡產生器允許您可視化調整9個CSS濾鏡函數——blur、brightness、contrast、grayscale、hue-rotate、invert、opacity、saturate和sepia——並即時查看組合效果。

CSS濾鏡可對圖像、背景、文字等HTML元素應用類似圖片編輯軟體的視覺效果。它們使用GPU加速，所有處理均在瀏覽器中完成。

使用方法

1. 拖動任意滑桿以套用該濾鏡效果。
2. 組合多個濾鏡——預覽即時更新。
3. 預設值的濾鏡會自動從輸出中排除。
4. 點擊「重置全部」恢復預設值。
5. 點擊「複製」複製CSS filter屬性。

使用情境

設計師使用grayscale和sepia濾鏡為圖像建立單色UI區域。開發者使用blur建立磨砂玻璃背景。brightness常用於懸停效果。深色模式實作中使用invert濾鏡。

常見問題

• filter和backdrop-filter有什麼區別？ — filter套用於元素本身及所有子元素。backdrop-filter僅套用於元素後方區域（適合磨砂玻璃遮罩）。
• 可以組合多個濾鏡嗎？ — 可以。在filter屬性中用空格分隔列出。此工具自動完成。
• CSS濾鏡影響效能嗎？ — grayscale和brightness等簡單濾鏡開銷很小。blur開銷較大，特別是大面積區域——在行動裝置上慎用。