CSS filter一覧と使い方｜blurとbackdrop-filterの違い

CSSのfilterとは、要素そのもの（画像・文字・子要素をまとめて）に、ぼかしや色の変化をかけるプロパティです。 これに対して backdrop-filter は、要素の「後ろに見えているもの」にだけ効果をかけるプロパティで、すりガラスのような表現に使います。名前は似ていますが、効果がかかる場所が正反対です。

この記事では、filterで使える10種類の関数を「変化なしの値・指定できる範囲・単位・見た目の変化」で一覧にしたうえで、同じ色の四角に10関数を当てたときの色を、実際にChromium 141で描画して画素の値を読み取った結果を載せています。指定する順番で色が変わる例、backdrop-filterが効かない条件、blurで端が白くにじむときの直し方も、すべて同じ方法で確かめた数値つきで説明します。

CSS filterの早見表（10関数の値と範囲）

まずは一覧です。「変化なしの値」は、その値を書いても見た目が元のままになる値です。アニメーションの開始点にもこの値を使います。

filter と backdrop-filter の違いは次のとおりです。

この記事の確認方法と範囲

数値をどう取ったかを先に書いておきます。

色の数値は Chromium での結果です。ほかのブラウザでは計算の丸め方によって1〜2程度の差が出ることがあります。

filterの基本の書き方

filter は、プロパティの値に関数を書きます。複数かけるときは半角スペースで区切って並べます。

/* 1つだけ */
.photo { filter: grayscale(1); }

/* 複数（左から順にかかる） */
.photo { filter: grayscale(1) brightness(1.2) blur(2px); }

/* 効果を外す */
.photo:hover { filter: none; }

カンマで区切った書き方は無効な値になり、その行ごと無視されます。Chromium で CSS.supports() を呼んで確かめた結果です。

無効な値が1つでも混ざると filter 全体が効かなくなるので、「効かない」ときはまず単位と区切り文字を見直すのが近道です。

かっこの中を空にした場合の計算後の値も確認しました。

grayscale() は引数を省くと完全な白黒になり、blur() や brightness() は省くと何も変わりません。読み手が迷わないよう、引数は省略せずに書くことをおすすめします。

10関数を同じ色に当てた結果

白い背景に置いた rgb(52, 152, 219) の四角（100px四方）に、それぞれの filter を当てて四角の中央の色を読み取りました。

この表から読み取れるポイントは次の4つです。

• brightness は各色に同じ数を掛けるだけです。0.5なら 52→26、152→76、219→110 と半分になります。
• grayscale(1) と saturate(0) は同じ結果になりました。白黒にしたいときはどちらでも構いません。
• hue-rotate(180deg) と invert(1) は別の色になります。どちらも「反対の色」に見えますが、invert は明るさも反転するためです。
• blur は面の内側の色を変えません。 変わるのは輪郭の周辺だけです。

blur と drop-shadow は、端と外側の画素を見ると違いがわかります。

blur をかけると、端の色は背景の白と混ざって薄くなり、四角の外側にも色がはみ出します。 これが後半で扱う「端が白くにじむ」現象のもとです。

やりたいこと別の書き方

画像をぼかす（blur）

.photo-blur { filter: blur(4px); }

かっこの中は「ぼかしの半径」です。数字が大きいほど強くぼけます。0.25rem のように rem でも書けます。文字にもかけられるので、読み込み中の仮表示にも使えます。

白黒・セピアにして、ホバーで戻す

.card img {
  filter: grayscale(1);
  transition: filter 0.3s ease;
}
.card img:hover {
  filter: grayscale(0);
}

ホバー後を filter: none ではなく grayscale(0) と書いておくと、同じ関数どうしで数値がなめらかに変わります。 関数の並びが前後でそろっていると、ブラウザは各関数の値を1つずつ補間できます（このアニメーションの動きは一般に知られた仕様に沿った説明で、今回の計測には含めていません）。

暗くして文字を読みやすくする（brightness）

.hero img { filter: brightness(0.6); }

写真の上に白い文字を重ねるときの定番です。黒い半透明の膜を重ねる方法と違い、要素を増やさずに済みます。

アイコンの色を変える（invert / brightness）

/* 黒いアイコンを白に */
.icon-white { filter: invert(1); }

/* どんな色のアイコンも白に */
.icon-white-any { filter: brightness(0) invert(1); }

2つめは「いったん真っ黒にしてから反転する」という順番を利用しています。順番を逆にすると真っ黒になるので、次の節の「順番」の話とあわせて覚えておくと便利です。

形に沿った影をつける（drop-shadow）

.logo { filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.3)); }

引数は「横のずれ・縦のずれ・ぼかし半径・色」の順です。box-shadow との違いは次の表のとおりです。

吹き出しのしっぽや、切り抜かれたロゴに影をつけたいときは drop-shadow、カードのような四角い要素には box-shadow が向いています（影の形の違いは一般に知られた仕様で、今回計測したのは四角い要素の影の位置だけです）。

複数指定は順番で結果が変わる

filter に並べた関数は、左から順に、前の結果に対してかかります。 同じ関数の組み合わせでも順番を入れ替えると色が変わります。先ほどと同じ青い四角で計測しました。

1行目と2行目を比べると、最後に grayscale を置くと色味がすべて消えることがわかります。白黒にしてからセピアをかければセピア色になり、セピアにしてから白黒にすればグレーに戻ります。

3行目と4行目は、brightness(2) で 255 を超えた部分が上限で切り取られるタイミングが違うために差が出ています。「明るくしてから差を縮める」のと「差を縮めてから明るくする」のは別の計算です。

一方、5行目と6行目のように、順番を入れ替えても同じ値になる組み合わせもありました。順番で迷ったら、次の考え方で並べると結果を予想しやすくなります。

filterとbackdrop-filterの違いを図とコードで比べる

2つのプロパティは、「どの層に効果がかかるか」が違います。

flowchart TB
  subgraph A["filter: blur(8px) をパネルに指定"]
    A1["背景の写真<br>そのまま"] --> A2["パネル<br>枠も文字もぼける"]
  end
  subgraph B["backdrop-filter: blur(8px) をパネルに指定"]
    B1["背景の写真<br>パネルの範囲だけぼける"] --> B2["パネル<br>文字はくっきり"]
  end

同じ構造で、指定だけを変えて比べられるコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>filter と backdrop-filter の比較</title>
<style>
  body { margin: 0; font-family: sans-serif; }
  .stage {
    position: relative;
    width: 400px; height: 300px;
    background: linear-gradient(90deg, rgb(255, 0, 0) 0 50%, rgb(0, 0, 255) 50% 100%);
    margin-bottom: 16px;
  }
  .panel {
    position: absolute; left: 100px; top: 50px;
    width: 200px; height: 200px;
    display: grid; place-items: center;
    background: rgb(255 255 255 / 0.3);
    font-weight: bold;
  }
  .use-filter   { filter: blur(20px); }
  .use-backdrop { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
</style>
</head>
<body>
  <div class="stage"><div class="panel use-filter">filter</div></div>
  <div class="stage"><div class="panel use-backdrop">backdrop-filter</div></div>
</body>
</html>

背景は左半分が赤、右半分が青の縞です。境目（x=200）をまたぐようにパネルを重ね、境目の左右10pxの位置の色を読み取りました。

filter: blur はパネル自身（枠と文字）をぼかし、後ろには手を加えません。backdrop-filter: blur は後ろだけをぼかし、パネルの文字はそのままです。パネルの範囲の外（x=190、y=20）の色は、どの指定でも rgb(255, 0, 0) か、それにごく近い値のままでした。backdrop-filter の効果は要素の範囲の中にだけ現れます。

すりガラス表現のコピペ用コード

そのまま貼って動く、すりガラスのカードです。画像ファイルがなくても確認できるよう、背景はグラデーションにしています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>すりガラスのカード</title>
<style>
  body {
    margin: 0; min-height: 100vh;
    display: grid; place-items: center;
    font-family: sans-serif;
    background:
      radial-gradient(circle at 20% 30%, #ffb347 0 18%, transparent 19%),
      radial-gradient(circle at 75% 65%, #4fc3f7 0 22%, transparent 23%),
      linear-gradient(135deg, #5b6ee1, #c850c0);
  }
  .glass {
    width: min(90vw, 360px);
    padding: 24px;
    border-radius: 16px;
    color: #fff;
    /* 1. 半透明の背景（これがないと「ただの透明」に見える） */
    background: rgb(255 255 255 / 0.18);
    /* 2. 後ろをぼかす。接頭辞つきを先、標準を後に書く */
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    backdrop-filter: blur(12px) saturate(1.4);
    /* 3. 縁の光と影でガラスらしさを足す */
    border: 1px solid rgb(255 255 255 / 0.35);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.2);
  }
  /* backdrop-filter が使えない環境では、背景を濃くして文字を読めるようにする */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass { background: rgb(60 60 90 / 0.85); }
  }
</style>
</head>
<body>
  <div class="glass">
    <h2>お知らせ</h2>
    <p>カードの後ろにある模様だけがぼけて、この文字はくっきり読めます。</p>
  </div>
</body>
</html>

仕上がりを調整するときの目安です。

backdrop-filterが効かないときの確認表

もっとも多い原因は背景が不透明になっていることです。先ほどの縞の背景で、パネルの背景を透けない白にして計測しました。

不透明な白にすると、どちらも真っ白になりました。後ろはきちんとぼけているのですが、その上を不透明な背景が塗りつぶしているので見えません。 MDN の backdrop-filter のページにも、効果を見るには要素かその背景を透明または半透明にする必要がある、と書かれています。

直し方は、背景色に透明度をつけるだけです。

/* 直す前：不透明なので後ろが見えない */
.header { background: #ffffff; backdrop-filter: blur(10px); }

/* 直した後：半透明にする */
.header { background: rgb(255 255 255 / 0.6); backdrop-filter: blur(10px); }

そのほかの原因もあわせて、上から順に確認できる表にまとめます。

開発者ツールの「計算済み」タブで backdrop-filter の値が none になっていれば3番か4番、値が入っているのに見た目が変わらなければ1番か2番、と切り分けられます。

blurで端が白くにじむときの直し方

写真全体に filter: blur() をかけると、端の色が背景と混ざって白っぽく（背景が白の場合）見えます。 ぼかしは周りの画素と色を平均する処理なので、端では「画像の外＝何もない部分」が計算に入るためです。

白い背景の上に、緑 rgb(0, 100, 0) の四角（200px四方）を置いて blur(10px) をかけ、左の端の付近の色を読み取りました。

読み取れることは3つです。

• blur だけだと、外側に色がはみ出し、端は白と混ざって薄くなります（1行目）。
• overflow: hidden だけでは、はみ出しは止まりますが端の薄さは残ります（2行目）。
• ぼかす要素を親より大きくして、にじむ部分を親の外へ追い出すと、端まで元の色に近づきます（3〜4行目）。ぼかし半径10pxに対して20px広げた4行目では、端の画素が rgb(2, 101, 2) と、元の色とほぼ同じになりました。

コピペ用の形にすると次のようになります。

<div class="blur-box">
  <img src="photo.jpg" alt="">
</div>

.blur-box {
  position: relative;
  width: 400px; height: 260px;
  overflow: hidden;            /* はみ出した分を隠す */
}
.blur-box img {
  position: absolute;
  inset: -20px;                /* ぼかし半径の2倍ぶん外へ広げる */
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  object-fit: cover;
  filter: blur(10px);
}

広げる量の目安は「ぼかし半径の2倍」です。今回の計測では、10pxのぼかしに対して scale(1.1)（200pxの四角では片側10pxぶん）だと端に少し薄さが残り、20px広げるとほぼ消えました。

画像を拡大したくない場合は、5行目の方法が使えます。画像にはフィルターをかけず、上に透明な層を重ねて backdrop-filter でぼかします。

.blur-box { position: relative; }
.blur-box::after {
  content: "";
  position: absolute; inset: 0;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

この方法では端の画素も rgb(0, 100, 0) のままでした。backdrop-filter は要素の範囲の外にある透明な部分を計算に混ぜないためです。

filterをかけた要素の中で起きること

filter は見た目だけでなく、配置の基準にも影響します。 値が none 以外の filter を持つ要素は、子孫の position: fixed の基準になります。

上から300pxの位置にある親に filter: grayscale(0) を指定し、その中に position: fixed; top: 0 の子を置いて位置を調べました。

見た目が変わらない grayscale(0) でも、基準は親に切り替わりました。 固定ヘッダーやモーダルが思った位置に出ないときは、祖先に filter がかかっていないかを確かめてください。対処は次のどちらかです。

また、filter のかかった要素は新しい重なりの基準（スタッキングコンテキスト）を作ります。中の子に大きな z-index をつけても、filter のかかった親より手前には出られません。重なり順が合わないときも、同じ2つの対処が使えます（重なり順については一般に知られた仕様で、今回は計測していません）。

ブラウザ対応と-webkit-接頭辞の要否

filter は主要なブラウザで長く使えており、接頭辞なしで書けます。確認が必要なのは backdrop-filter のほうです。

MDN では backdrop-filter は「Baseline 2024（2024年9月から新しく広く利用可能）」と表示されています。Safari 18 で接頭辞なしに対応したことで、主要ブラウザがそろいました。Can I use のページでは、世界全体での対応率は 96.36% と表示されていました（いずれも2026年10月3日に各ページを開いて確認）。

では接頭辞はもう要らないのかというと、Safari 17 以前の利用者にも表示したいなら、まだ両方書いておくのが確実です。

.glass {
  -webkit-backdrop-filter: blur(12px);  /* Safari 17 以前のため */
  backdrop-filter: blur(12px);          /* 標準。こちらを後に書く */
}

なお、Chromium 141 で CSS.supports('-webkit-backdrop-filter', 'blur(1px)') を呼ぶと false、接頭辞なしは true が返りました。Chromium 系は接頭辞つきの書き方を受け付けないので、接頭辞つきだけを書くと Chrome や Edge で効かなくなります。必ず標準の書き方とセットにしてください。

Autoprefixer などのビルド時の道具を使っている場合は、対象ブラウザの設定に応じて接頭辞を自動で足してくれます。

描画負荷を抑える書き方

filter の中でも blur と drop-shadow、そして backdrop-filter は、周りの画素を広く読んで計算するため、色を変えるだけの関数より処理が多くなります。今回は描画時間の計測は行っていないので、一般に知られた性質と、負荷を抑える書き方を整理します。

blur のアニメーションを opacity の切り替えに置き換える例です。

.thumb { position: relative; }
.thumb img { display: block; width: 100%; }
.thumb .blurred {
  position: absolute; inset: 0;
  filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.thumb:hover .blurred { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .thumb .blurred { transition: none; }
}

ぼかした層をあらかじめ描いておき、透明度だけを動かします。体感が重いと感じたら、開発者ツールのパフォーマンス計測で、filter を外したときとの差を比べてみてください。

filterとほかのプロパティの使い分け

似た結果を得られるプロパティが複数あるときの選び方です。

最後の行は、よく出会う場面です。背景画像を持つ要素に filter をかけると、中の文字も一緒にぼけます。背景を疑似要素に分けると、文字はそのまま保てます。

.hero { position: relative; overflow: hidden; color: #fff; }
.hero::before {
  content: "";
  position: absolute; inset: -20px;
  background: url("photo.jpg") center / cover;
  filter: blur(10px) brightness(0.7);
  z-index: -1;
}
.hero { isolation: isolate; }  /* 疑似要素が親の後ろへ抜けないようにする */

よくある質問

Q. filter: blur と backdrop-filter: blur はどちらを使えばよいですか？ A. ぼかしたい対象で選びます。画像や要素そのものをぼかすなら filter、要素の後ろに見えているものをぼかして手前の文字を読ませたいなら backdrop-filter です。今回の計測でも、filter をパネルにかけたときは後ろの縞の色は変わらず、backdrop-filter のときだけ後ろの赤と青が混ざりました。

Q. backdrop-filter を指定したのに何も変わりません。 A. まず背景色が不透明になっていないかを確かめてください。不透明な白を指定した計測では、後ろの色は見えず真っ白になりました。rgb(255 255 255 / 0.6) のように透明度をつけると効果が見えます。次に、Safari 17 以前で見ている場合は -webkit-backdrop-filter を足します。

Q. -webkit-backdrop-filter はまだ書く必要がありますか？ A. Safari 18 以降と、最新の Chrome・Edge・Firefox だけが対象なら不要です。Safari 17 以前にも表示したい場合は、接頭辞つきを先に、標準を後に、両方書きます。Chromium 141 は接頭辞つきの書き方を受け付けなかったので、接頭辞つきだけにするのは避けてください。

Q. grayscale(1) と saturate(0) は同じですか？ A. 今回の計測では、どちらも rgb(52, 152, 219) を rgb(136, 136, 136) に変え、同じ結果でした。意味の伝わりやすさで選んで構いません。白黒にしたいなら grayscale、彩度を少しずつ変えたいなら saturate が読みやすい書き方です。

まとめ

• filter は要素自身に、backdrop-filter は要素の後ろに効果をかけます。 使える関数は同じ10種類です。
• 値の範囲は3グループで覚えられます。0〜1のもの（grayscale・invert・opacity・sepia）、0以上で上限なしのもの（brightness・contrast・saturate・blur）、角度のもの（hue-rotate）です。
• 複数指定はスペース区切りで、左から順にかかります。 grayscale(1) sepia(1) はセピア色、sepia(1) grayscale(1) はグレーになりました。
• backdrop-filter は背景が半透明のときだけ見えます。 不透明な背景では後ろが塗りつぶされます。
• blur で端が白くにじむときは、親に overflow: hidden、子をぼかし半径の2倍ぶん広げると、端まで元の色に近づきます。
• Safari 17 以前も対象なら -webkit-backdrop-filter を標準の指定の前に併記します。Chromium 系は標準の書き方だけを受け付けます。
• filter をかけた要素は、子孫の position: fixed の基準になります。 固定要素の位置がずれたら祖先の filter を確かめます。

株式会社RJCでは、CSSのfilterやbackdrop-filterのような表現の仕組みを仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。