【CSS】filter:blurの使い方！CSSだけで画像にぼかしをかける方法は？

この記事では、CSSだけで画像にぼかし表現をかける方法を紹介します。

CSSで画像にぼかしをかけるには「filter:blur()」を使います。
記事では「filter:blur()」の使い方や実際にぼかしをかけた画像のイメージを紹介します。

それではさっそく見ていきましょう！

filter:blurを使ってCSSで画像にぼかしをかける

それではさっそく、CSSを使って簡単に画像にぼかしをかける方法を解説していきます。

サンプルとして用意したのはこちらの外国の街並みの画像。
この画像をCSSを使ってぼかしをかけます。

まず、htmlコードはこちら。
分かりやすく「bokashi」というclassをつけています。

<img class="bokashi" src="/xxx.jpg">

cssコードはこちら。

.bokashi {
  filter: blur(3px);
}

これで画像はこのとおりぼかしをかけたような感じになります。

詳しい使い方を解説すると、
「blur(3px)」のように、()にぼかしの半径の長さを指定します。
上記のCSSの場合、半径3pxでぼかしているということになります。
この数値が大きくなればなるほど、ぼかしが強くなります。

CSSのfilter:blur()を使った画像ぼかしは、画像ファイルそのものにぼかし加工をしているわけではありません。

ぼかしフィルターを表面にかぶせただけ、という感じのイメージです。

画像ファイルそのものをブラウザで開いたりダウンロードしたりすれば、ぼかしのかかっていない画像を見ることができます。
なので、モザイクをかけるかわりに使うというような用途にはまったく向いていませんので注意してください。

画像のぼかし表現は、使いみちとしてはある程度限られそうです。

おしゃれな使いみちとしては、背景画像をぼかして前面のオブジェクトを際立たせるというような表現などがありそうです。

あとは、表面的には隠しておいて、興味のある人にだけ見てもらいたい画像にfilter:blur()を使うという使いみちもあります。

例えばこんな感じ。

【閲覧注意】
怖い熊の画像です。見たい人だけクリックしてね！

アイデア次第で、クイズやネタ系のコンテンツなどで読者を楽しませる仕掛けとして使えそうですね。

「blur()」以外にもCSSのfilter関数はたくさんあります。

filter関数の一覧を紹介します。

grayscale()
画像をグレイスケールに変換する。%で指定。

contrast()
画像のコントラスト調整する。%で指定。100%が基準値。

blur()
画像をぼかす。pxやremで数値を指定。

brightness()
画像を明るさを調整する。%で指定。100%が基準値。

drop-shadow()
画像にドロップシャドウをつける。

hue-rotate()
画像の色相環を回転する。degで角度を指定。

invert()
画像の色を反転する。%で指定。

opacity()
画像を半透明にする。%で指定。

saturate()
画像の彩度を調整する。%で指定。

sepia()
画像をセピア色にする。%で指定。

これらの関数は単独で使ってもいいですし、
「filter: grayscale(100%) contrast(150%);」というふうに組み合わせて使うこともできます。

各関数については、機会があれば別の記事で詳しく紹介します。

以上、CSSだけで簡単に画像にぼかしをかける方法を紹介しました。

CSSのfilter機能をうまく使いこなせば、Photoshopなどの画像編集ソフトで加工するのと同じような表現も簡単にできるようになります。

ぜひ参考にしてみてくださいね！