CSS | filterのblur()で画像や文字をぼかすサンプル集

2020-09-11CSS フィルター,CSS

CSSのfilterプロパティのblur()を使って画像や要素をぼかすCSSサンプルパターン集です。

filterプロパティは、CSS要素だけでなく画像やSVG、その透過部分を反映してフィルター効果を付けることができる人気のプロパティです。

filter: blur()の基本

filter: blur()に付与するオプション引数はpx単位で指定します。未指定時は0pxがデフォルト値として設定されています（変化なし）。
指定したpxが大きいほど幅広くぼかし処理を行います。

filter: blur(1px);

See the Pen CSS filter: blur() by yochans (@yochans) on CodePen.

filter: blur()の比較

filter: blur()で0px～5pxまでを指定した場合の比較画像です。上から順に0px、1px、2px、3px、4px、5pxとなっています。

See the Pen CSS filter: blur() comparison by yochans (@yochans) on CodePen.

ぼかした画像に文字を重ねる場合

画像に文字を重ねて表示する場合は、上記サンプルのCSSのように、container部分にfilterを追加してしまうと、その中にある全ての要素に対して、ぼかし効果が反映されてしまいます。

filterプロパティは子要素・疑似要素毎にはCSSによる解除ができませんので、テキスト部分はぼかしの効果を受けないような構造にしておく必要があります。

See the Pen CSS filter: blur() image & text by yochans (@yochans) on CodePen.

マウスホバーでぼかし表示に、または戻す場合

マウスホバーでぼかしたり、またはぼかし表示から戻す場合の方法です。

filterは子要素・疑似要素でCSSによる解除できませんが、マウスホバー時に使う「:hover」では「filter: none;」を使った解除が可能です。

また、CSSのfilterにtransitionでアニメーション時間を設定するにはtransitionでtransformではなくfilterを指定することで反映させることが可能です。

例えば、以下のように指定します。

transition: filter 0.3s ease;

マウスホバーでセピア調から元に戻す動作サンプルです。

See the Pen CSS filter blur hover anim by yochans (@yochans) on CodePen.