CSS背景滤镜生成工具

透過拖動九個濾鏡函式的滑桿來即時建構 backdrop-filter CSS：blur、brightness、contrast、grayscale、hue-rotate、invert、opacity、saturate 和 sepia。輸出會同時產生 backdrop-filter 和 -webkit-backdrop-filter，使效果能在現代瀏覽器中通用，並在可自訂的背景上呈現一個玻璃卡片，方便您在調整時檢視結果。

1. 可選：點擊一個預設（Frosted Glass、Dark Glass、Vintage、Inverted）以從精挑細選的外觀開始。 2. 拖動 Controls 面板中的滑桿；每個濾鏡只有在與其預設值不同時才會出現在產生的 CSS 中（例如 brightness/contrast/saturate/opacity 預設為 100，blur 預設為 0）。 3. 在 Background 欄位中編輯任何有效的 CSS background 值（漸層、圖片 url、顏色），以便在不同背景下測試濾鏡。 4. 點擊 Copy 以複製 backdrop-filter 和 -webkit-backdrop-filter 兩個宣告。

blur 0–50px；brightness 0–200%（預設 100）；contrast 0–200%（預設 100）；grayscale 0–100%；hue-rotate 0–360deg；invert 0–100%；opacity 0–100%（預設 100）；saturate 0–200%（預設 100）；sepia 0–100%。Reset 會將所有滑桿恢復為預設值。處於中性值的濾鏡會從輸出中省略；如果全部為中性值，輸出為 backdrop-filter: none。