CSSのみでテキストや画像にぼかし効果を付ける

テキストや画像にぼかし（ブラー）効果をつけたい時に、画像加工をしなくてもCSSのfilterプロパティを利用して同様の効果を表現することができます。

実際に効果を適用してみます。
どの様に変化するのかご確認ください。

filter: blur適用前

filter: blur(5px)適用後

ぼかしの効果は、pxの単位で指定できます。
単位によってどれくらい効果が変わるのか実際に見てみましょう。

filter: blur(1px)

filter: blur(10px)

filterプロパティは、ぼかしの他に明度やコントラストなど10種類用意されています。
後ほど他の効果についてもご紹介します。