css だけで画像をぼかすなどのフィルターを実装する方法

filter: blur()

対応状況や注意点

対応ブラウザは Can I Use… から確認できます。

Can I Use… によると、ほとんどのモダンブラウザではプレフィックス無しでサポートしているようです。
一部の過去のブラウザにも対応させるために、-webkit-のプレフィックスをつけてもいいかもしれません。

実装方法

実装はいたって簡単。

HTML
<img class="blur" src="example.jpg" />

CSS
.blur{
 filter: blur(10px);
 -webkit-filter: blur(10px);
}

実装結果

画像にフィルターが適用されて、ぼかしが効いているかと思います。

ぼかす量を大きくしすぎるとモバイルでぼかしが適用されなくなる場合があるので、その場合はぼかし量を小さくしてみましょう。

filterは、画像だけでなく、文字などその他の要素にも使用可能で便利です。

ぼかし以外にも色々できる

filterはぼかし機能だけではなく、コントラストやグレースケールなど、フィルターをかけることができます。下記では複数のフィルターをかけてみます。

HTML
<img class="filter" src="example.jpg />

CSS
.filter{
 filter: contrast(3) grayscale(0.8);
}

ここでは、コントラスト・ぼかし・グレースケールのフィルターを適用してみました。

フィルタを複数組み合わせることで、わざわざフォトショップなので画像を加工せず、しかも動的にブラウザ上でフィルタをかけることができ、リッチなウェブサイト作成が可能となります。

全てのフィルターを知るには、こちらのサイトがチェクしてください。

iOS のような後ろの要素を css だけでぼかす方法