こんにちは、さち です。
「CSS」で filter プロパティをそこそこ使うんですが、「ぼかし blur 」「影 drop-shadow 」以外のエフェクトをほぼ使っていません。
他にどんなエフェクト何があるのか気になったので、実際に使って調べてみます。
サンプル画像
サンプルとしてこちらの画像を使います。
この「画像」要素に filter の様々な「エフェクト」をかけることで、どのように変化するのか見ていきましょう。
エフェクトの一覧
ぼかし（ブラー）
filter: undefined;
効果の強さ
影（ドロップシャドウ）
filter: undefined;
横位置
縦位置
ぼかし
影の色
グレースケール（白黒）
filter: undefined;
効果の強さ
セピア
filter: undefined;
効果の強さ
色相
filter: undefined;
効果の強さ
明るさ
filter: undefined;
効果の強さ
彩度
filter: undefined;
効果の強さ
コントラスト
filter: undefined;
効果の強さ
色の反転（ネガポジ反転）
filter: undefined;
効果の強さ
不透明度
filter: undefined;
効果の強さ
背景にかける「backdrop-filter」
filter と似たもので、backdrop-filter というプロパティもあります。使用できるエフェクトは filter と同じです。
filter は自分自身にエフェクトを掛けますが、backdrop-filter は自分の後ろにある（透けて見えている）要素にエフェクトを掛けます。
こんな感じで、「すりガラス」のような見た目にしたいときに使うと便利です。
名前が background-filter でなく backdrop-filter なのは、自身に設定した背景にはエフェクトが掛からないからです。エフェクトがかかるのは後ろにある要素に対してだけなので気を付けて下さい。
2026年5月時点で対応しているのは比較的新しいブラウザーです。使うときは注意をして下さい。
コメント