backdrop-filterプロパティで要素の背景にファイルター効果をつける方法と使い方【CSS】

最終更新日：2025-06-06

公開日：2025-06-06

ページ内に広告が含まれています。

backdrop-filterプロパティで要素の背景にファイルター効果をつける方法と使い方【CSS】

ウェブデザインで近年よく見られる、背景をぼかしたりするなどのフィルター(エフェクト)がありますが、CSSのbackdrop-filterプロパティを使うと簡単に実装が可能です。
今回は、そのbackdrop-filterプロパティについて詳しく解説していきます。

backdrop-filterプロパティとは
backdrop-filterプロパティの基本的な使い方
filterプロパティとの違いについて
backdrop-filterプロパティで使用できるフィルター(エフェクト)について
- none
- blur
- brightness
- contrast
- grayscale
- hue-rotate
- invert
- sepia
- saturate
- drop-shadow、opacityについて
旧バージョンのブラウザなどに対する対応
さいごに

backdrop-filterプロパティとは

backdrop-filterプロパティとは、指定した要素の背景(背後領域)に対してぼかしなどのフィルター(エフェクト)をかける事が出来るプロパティです。
よく使われているものとしては、固定ヘッダーの背景をぼかして半透明にしたりするものが最近は多いかと思います。

次項で、基本的な使い方や指定出来る値について解説していきます。

backdrop-filterプロパティの基本的な使い方

backdrop-filterプロパティの基本的な使い方は以下のようになります。

.box {
    backdrop-filter: フィルター(エフェクト)の種類と値;
}

上記のように、フィルター効果を付けたい要素に対してbackdrop-filterプロパティを設定しフィルターの種類とその値を指定します。

filterプロパティとの違いについて

backdrop-filterプロパティと似ているプロパティで、filterプロパティがあります。
この2つの違いとしては、filterプロパティは指定した要素すべてにフィルターがかかりますが、backdrop-filterプロパティは指定した要素の背景(背後領域)のみにフィルターがかかります。

この2つのプロパティの違いを理解し、適切なものを選んで使用してください。

backdrop-filterプロパティで使用できるフィルター(エフェクト)について

backdrop-filterプロパティで使用できるフィルター(エフェクト)については以下の通りです。
各表示例で使用するHTML・CSSは以下のようになります。

<div class="blk">
    <p>backdrop-filterプロパティで<br>要素の背景にファイルター効果を<br>つける方法と使い方</p>
</div>

.blk {
    width: 100%;
    padding: 50px 20px;
    background: url(/file/sample_img.jpg) no-repeat center center;
    background-size: cover;
}
p {
    font-size: 2.0rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.5;
    padding: 20px 20px;
    background-color: rgba(255,255,255,0.5);
}

none

フィルター(エフェクト)はありません。これが初期値となります。

p {
    backdrop-filter: none;
}