CSS背景フィルター生成ツール

blur、brightness、contrast、grayscale、hue-rotate、invert、opacity、saturate、sepia の 9 つのフィルター関数のスライダーをドラッグして、backdrop-filter CSS をライブで構築します。出力は 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 になります。