CSSで画像をぼかす方法（filter: blur）

2025/06/25

画像をぼかすCSSテクニック

画像にぼかし（ブラー）をかけることで、背景を柔らかく見せたり、注目を外したりする演出が可能です。CSSのfilter: blur()を使えば、簡単に実装できます。


.sample {
  filter: blur(5px);
}

.sample {

filter: blur(5px);

}


.sample {
  filter: blur(0);
  transition: 0.3s;
}

.sample:hover {
  filter: blur(5px);
}

.sample {

filter: blur(0);

transition: 0.3s;

}

.sample:hover {

filter: blur(5px);

}

ピクセル値でぼかし具合を調整可能（例：blur(2px)〜blur(10px)など）
transitionを併用することで自然な効果が出ます。

よかったらシェアしてね！