🎚️CSSフィルタージェネレーター

filterの関数と単位

CSSのfilterプロパティは、画像や要素の見た目に効果を掛けるプロパティで、blurやsepiaなどの関数を半角スペースで区切って並べて書きます。

• px（ピクセル）：blur関数はぼかしの半径をpxで指定する関数で、4pxを指定すると半径4ピクセルの範囲で色がなじみます。
• %（パーセント）：brightness関数やsepia関数は効果の強さを%で指定する関数で、brightness関数では100%が元の明るさ、120%が2割明るくした状態です。
• deg（度）：hue-rotate関数は色相環の上で色を回す角度をdegで指定する関数で、180degを指定すると色が反対側の色相へ移ります。

なぜ書く順番で結果が変わるのか

filterに並べた関数は左から順に適用され、前の効果を掛けた結果に次の効果が掛かるため、並べる順番が変わると見た目も変わることがあります。たとえば白黒にしてからセピアを掛けると茶色みが残り、セピアを掛けてから白黒にすると茶色みが消えます。本ツールでは適用順序が固定されていますが、生成されたCSSコードを編集することで順番を変更できます。

backdrop-filterとの違い

filterとbackdrop-filterは同じ関数を使えるプロパティですが、効果を掛ける対象が異なります。

• filter：filterは、指定した要素そのもの（画像や文字など）の見た目に効果を掛けるプロパティです。
• backdrop-filter：backdrop-filterは、指定した要素の背後に見えている部分に効果を掛けるプロパティで、すりガラスのような表現に使われます。