分類: 開發工具
CSS 濾鏡產生器
用即時滑桿產生 CSS filter 宣告
用滑桿調整 blur、brightness、contrast、grayscale、hue-rotate、invert、opacity、saturate 和 sepia，即時預覽組合效果，並複製產生的 CSS filter 宣告。
輸出
filter: none;
本頁的所有處理都在瀏覽器中完成，不會上傳任何內容。
這個工具能做什麼
CSS filter 屬性可以直接在瀏覽器中替元素加入模糊與顏色調整效果，不需要修改原圖。多個函式組合起來手寫很容易漏單位或順序混亂，這個工具會依滑桿產生宣告，並只包含你實際調整過的效果。
使用方式
- 拖動滑桿調整每個 filter 函式。
- 觀察預覽區域即時變化。
- 複製產生的 filter 宣告到樣式表。
隱私說明
本工具完全在你的瀏覽器中執行。輸入的內容不會被上傳、儲存或分享，關閉分頁就隨之消失。
常見問題
- 可以用在背景圖嗎？
- 可以，filter 可作用於任何元素，包括帶 background-image 的元素。如果只想模糊元素背後的背景而不影響內容，應使用 backdrop-filter。
- filter 會影響效能嗎？
- 複雜或帶動畫的濾鏡，尤其是大面積 blur，可能增加渲染開銷。正式上線前應在目標裝置上測試。
- 為什麼濾鏡函式順序重要？
- 每個函式都會作用在前一個函式處理後的結果上，所以 grayscale(100%) sepia(50%) 可能和反過來不同。這個工具使用固定且常見的順序。