ブラーとは | バイブコーダーのための名称辞典

ブラーとは

filter で要素そのものをぼかしたり、backdrop-filter で背後だけをぼかしたりする CSS の技法。

概要

filter: blur() を使うと要素自体がぼやけて見え、backdrop-filter: blur() を使うと要素の背後にある部分だけがぼやけて見えます。写真をぼかして見せたいときは前者、前面に置いた要素の後ろを透かしてぼかしたいときは後者を使います。どちらも見た目を作る CSS だけで実現でき、画像の加工ソフトを使わずにぼかし効果を出せます。

別名

表記ゆれ：ぼかし、背景ぼかし、filter: blur、backdrop-filter

「ブラー」は英語の blur（ぼかす）をそのままカタカナにした呼び方で、現場では「ぼかしを入れて」という言い方もよく使われます。

AI への伝え方

「この画像にブラーをかけて」「背景だけぼかして」で伝わります。要素自体をぼかすのか、背後だけを透かしてぼかすのかで filter と backdrop-filter のどちらを使うかが変わるため、区別して伝えると仕様がぶれません。

似たパーツとの違い

「グラスモーフィズム」は backdrop-filter: blur() を使った表現の一つですが、それに加えて半透明の白いレイヤーと薄い縁取りを重ねて「ガラス板が乗っている」ように見せる点が違います。ブラー単体は背景をぼかすだけで、ガラスのような質感までは作りません。「オーバーレイ」は画面全体を覆う暗いレイヤーのことで、ぼかしを伴わない場合も多い点が異なります。

デモ

filter: blur()（要素自体をぼかす）

backdrop-filter: blur()（背後だけをぼかす）

背後だけがぼやけます

コード

HTML

<div class="blur-demo">
  <div class="blur-demo__item">
    <p class="blur-demo__caption">filter: blur()（要素自体をぼかす）</p>
    <div class="blur-demo__photo"></div>
  </div>
  <div class="blur-demo__item">
    <p class="blur-demo__caption">backdrop-filter: blur()（背後だけをぼかす）</p>
    <div class="blur-demo__scene">
      <div class="blur-demo__panel">背後だけがぼやけます</div>
    </div>
  </div>
</div>

CSS

.blur-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-family: sans-serif;
}

.blur-demo__item {
  flex: 1;
  min-width: 200px;
}

.blur-demo__caption {
  margin: 0 0 8px;
  font-size: 13px;
  color: #666666;
}

.blur-demo__photo {
  height: 120px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0017c1 0%, #4dd0e1 100%);
  filter: blur(4px);
}

.blur-demo__scene {
  position: relative;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  background: repeating-linear-gradient(45deg, #0017c1 0 12px, #333333 12px 24px);
}

.blur-demo__panel {
  position: absolute;
  inset: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #ffffff;
  font-size: 13px;
  text-align: center;
}