CSS filter & backdrop-filter ジェネレーター
プロパティを filter と backdrop-filter から選び、プリセットか 8 つの値で効果を調整します。プレビューを確認しながら、そのまま貼り付けられる宣言をコピーできます。
ブラウザ内でローカルに実行 · filter · backdrop-filter · 視覚効果
VoriToolsCSS Studio
プロパティを filter と backdrop-filter から選び、プリセットか 8 つの値で効果を調整します。プレビューを確認しながら、そのまま貼り付けられる宣言をコピーできます。
ブラウザ内でローカルに実行このワークベンチは、明るさ・コントラスト・彩度・グレースケール・セピア・色相回転・ぼかし・不透明度という 8 つの関数から 1 つの filter 宣言を組み立てます。まずプロパティを選びます。filter は要素そのものに、backdrop-filter は要素の背後にあるものに効果を描画します。あとはコントロールを動かすと、プレビューがその場で更新されます。
出力パネルには完成した宣言が入ります。filter なら 1 行、backdrop-filter なら Safari に必要な -webkit- 接頭辞付きの 2 行です。コピーして自分のルールに貼り付けてください。処理はブラウザー内で完結し、オフラインでも動きます。
filter は要素とその子孫・テキストを含めた描画結果に適用されます。backdrop-filter は要素自体には触れず、背後のピクセルだけを加工します。そのためガラス効果は、背景が半透明で初めて見えるようになります。
対応状況も同じではありません。Safari は今も -webkit-backdrop-filter が必要で、出力パネルが 2 行書くのはそのためです。未対応のエンジンは宣言を無視して通常どおり描画するので、ガラス表現は構造ではなく装飾として扱ってください。
各コントロールは 1 つの CSS 関数に対応します。brightness・contrast・saturate は中立の 100% を中心とした割合、grayscale・sepia・opacity は 0〜100%、hue-rotate は -360〜360 度、blur は 0.5 刻みの px です。並び順は固定で、その順に適用されるため、hue-rotate(-8deg) の後に blur(14px) をかける場合と逆順では結果が変わることがあります。
中立値のままの関数は出力に含まれません。それでも 1 つの宣言なので、各関数は元のピクセルではなく直前の関数の結果を変換します。
CSS を書き出す前に、各値はその欄の範囲に収められます。brightness と contrast は 0〜300、saturate は 0〜500、grayscale・sepia・opacity は 0〜100、hue-rotate は -360〜360、blur は 0〜40（0.5 刻み）です。blur に -5、grayscale に 500 と入力して欄から離れると 0 と 100 に戻り、空欄は直前の値に戻ります。これは出力を有効に保つためです。解釈できない値が 1 つあると、ブラウザーは filter 宣言ごと破棄します。
filter と backdrop-filter は GPU で合成され、中でもぼかしが高コストです。広い領域に 14px の backdrop blur をかけると、スクロール時を中心に他のすべてを合わせたより重くなることがあります。ぼかす面は小さく保ち、サポートする中で最も遅い端末で確認してください。