こんにちは、さち です。
「CSS」で filter プロパティをそこそこ使うんですが、「ぼかし blur 」「影 drop-shadow 」以外のエフェクトをほぼ使っていません。
他にどんなエフェクト何があるのか気になったので、実際に使って調べてみます。
サンプル画像
サンプルとしてこちらの画像を使います。
この「画像」要素に filter の様々な「エフェクト」をかけることで、どのように変化するのか見ていきましょう。
エフェクトの一覧
ぼかし（ブラー）
filter: undefined;
効果の強さ
影（ドロップシャドウ）
filter: undefined;
横位置
縦位置
ぼかし
※ 例では影の色を gray に固定していますが任意の色を指定可能です
グレースケール（白黒）
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 は自分の後ろにある（透けて見えている）要素にエフェクトを掛けます。言葉では分かりにくいので次項の使用例をどうぞ。
使用例
ソース
<div class="image"> <div class="filter">backdrop-filter</div> </div>
.image {
background-image: url(bluesky.jpg);
}
.filter {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
backdrop-filter を適用した要素には、background で「色」や「画像」を付けないで下さい。エフェクトが background で隠れてしまいます。（半透明であれば可）
結果
blur を使ったこの例では、「すりガラス」を通したような見た目になって涼しげですね。
ちなみに、プロパティ名が background-filter でなく backdrop-filter なのは、自身に設定した背景（background）にはエフェクトが掛からないからだと思われます。
エフェクトは自身よりも後ろに重なっている要素にだけ掛かるので気を付けて下さい。
ブラウザーの対応
2026年5月時点で対応しているブラウザーが多いですが、「Safari」はベンダープレフィックス -webkit- なしだと比較的新しいバージョンしか対応していないので注意して下さい。
backdrop-filter のブラウザー対応状況 - Can I use...
関連記事
filter プロパティを使ったときに、「Safari」で描画（レンダリング）の不具合が起きる場合はこちらの記事で解決できます。
コメント