CSS backdrop-filter ジェネレーター

各CSSプロパティの説明

backdrop-filter

backdrop-filterは、対象の要素の背面の画像や要素にエフェクトをかけることができます。値として次のようなものを指定できます。

• blur（ぼかし）
• brightness（明るさ）
• contrast（コントラスト）
• grayscale（グレースケール）
• hue-rotate（色相回転）
• invert（反転）
• opacity（透過度）
• saturate（彩度）
• sepia（セピア）
• drop-shadow（ドロップシャドウ）

複数指定することもでき、複数指定する場合は半角スペースで区切ります。
記述例） filter: blur(3px) saturate(120%);
初期値はnoneです。
また、hoverなどと組み合わせることにより、CSSでアニメーションをさせることもできます。

「blur」は、要素をぼかします。単位は基本的にpxを使います。

「brightness」は、要素の明るさを調整します。明るくしたり、暗くしたりすることができます。100%（もしくは1）の値を指定すると、入力は変更されません。100%を超える値を指定することもできます。

「contrast」は、要素のコントラストを調整します。0%を指定すると完全にグレーの要素が作成されます。100%を指定すると、変化がありません。100%を超える値を指定すると、よりコントラストの高い結果が得られます。

「grayscale」は要素をグレースケール（モノクロ）にします。100%を指定すると完全にグレースケールになります。0%では変化がありません。

「hue-rotate」は要素の色相を回転します。0degでは変化がありません。,360degを超える値は、回り込みになります。（420degの場合、60degとなる）

「invert」は、要素の色を反転させます。0%では変化がありません。100%で完全に反転されます。

「opacity」について詳しくは調査中です。

「saturate」は、要素の彩度を変化させます。100%では変化がありません。0%に近づくほど彩度が下がり、100%を超える値では彩度が上がります。

「sepia」は、要素をセピア調にします。0%では変化がありません。100%を指定すると完全にセピア調になります。

「drop-shadow」は、要素に影を指定します。box-shadowと似ていますが、insetが指定できません。それから、要素のフォルムに沿った影を生成します。背景が透過されたPNG画像には、透過されていない部分に沿った影を生成します。影は複数指定することも可能です。