文字にぼかしを掛けて読めなくしたい。画像にぼかしを掛けて背景にしたい。Photoshopで画像にして処理すれば簡単にできますが、いちいち作るのが手間。CSSでもっと簡単にできないの？という方に今回、CSSでできるコンテンツや背景のぼかし方をご紹介します。

クラス付与だけでコンテンツをぼかす方法

ぼかすだけならとてもシンプルです。以下のようなクラスを定義し、ぼかしたいコンテンツにクラスを付与するだけで完了です。

.blur{
  -ms-filter: blur(6px);
  filter: blur(6px);
}

実際にぼかしを掛けたのが以下になります。左が普通のコンテンツ、右がblurクラスを付与したコンテンツです。

背景だけをぼかしかける方法

背景のぼかしは擬似要素beforeをしようすることで掛けることができます。以下、ソースになります。

.blurBg{
  background: url(画像URL) no-repeat center;
  background-size: cover;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.blurBg:before{
  content: '';
  background: inherit;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
}

以下、実装画面になります。

ぼかした場合、画像端がボケて見えてしまいますので、5pxブラーした場合は上下左右は-5pxすることで端を切り落として綺麗に見えます。

まとめ

ぼかしを上手く活用すれば、デザインの幅も広がりとても便利です！

ぜひご活用下さい。