ぼかし効果は、見た目はもちろん機能面でも優秀なエフェクトです。たとえば、背景の写真をぼかすことで、写真の上に重ねたテキストを目立たせることができます。
かつては画像編集ソフトが必要な時代もありましたが、今ではCSSとJavaScriptで簡単にぼかし効果をつけられます。
本記事では、CSSとJavaScriptを使ったぼかし効果のスニペット7選を紹介します。
1. アニメーションつきのぼかしグラデーション
ぼかし効果は、大胆なデザインを繊細な印象に変身させられます。このアニメーション付きの背景も、ぼかし効果がついていることで、繊細で印象的なシーンを作り出しています。
See the Pen
Blurred animated gradients by Wil van der Tuin (@Jeromche)
on CodePen.0
（広告の後にも続きます）
2. ぼかし効果がついた動くテキスト
角度をつけたテキストを部分的にぼかし、スクロールに応じてぼかしの度合いを調整して、不気味な印象を演出しています。CSSのtransformを効果的に活用したスニペットです。
See the Pen
text-transform-and-blur by Ambika Castle (@ambika)
on CodePen.0
