ぼかし効果を作成するためのスニペット7選【CSS/JavaScript】

ぼかし効果は、見た目はもちろん機能面でも優秀なエフェクトです。たとえば、背景の写真をぼかすことで、写真の上に重ねたテキストを目立たせることができます。

かつては画像編集ソフトが必要な時代もありましたが、今では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

3. グリッチとぼかし効果がついた微生物風エフェクト

顕微鏡をとおして見た微生物のような、グリッチとぼかし効果と組み合わせたスニペット。リアルな動きが特徴です。

See the Pen
Worms by Fabio Ottaviani (@supah)
on CodePen.0

4. ぼかし効果がついた動画背景とログインボックス

CSSフィルターのぼかし効果でレトロな雰囲気を演出しながら、主役のログインボックスを引き立てています。

See the Pen
Pure CSS Blurred Video Background Login Box. by Lokesh Suthar (@magnus16)
on CodePen.0

5. インタラクティブな奥行きのあるぼかし効果

ぼかし効果で画像に奥行きをもたせているだけでなく、トランプにカーソルをあわせるとピントが合う、インタラクティブなスニペットです。ぼかし効果の幅広い可能性を感じられます。

See the Pen
Interactive dynamic depth of field by Thomas Trinca (@Trinca)
on CodePen.0

6. アニメーション付きの読み込み中ドット

比較的シンプルなローディングアニメーションも、ぼかし効果を使えばユニークな仕上がりに。

See the Pen
Loading Animation by Prathamesh Koshti (@prathameshkoshti)
on CodePen.0

7. ぼかし効果つきのスライドショー

表示されている画像を背景にも使用しつつ、背景の画像には強いぼかし効果をかけています。大きな画像を使用できなくても、このデザインなら画面が寂しくなりません。

See the Pen
Slick Slideshow with blur effect by Fabio Ottaviani (@supah)
on CodePen.0

おわりに

ぼかし効果は汎用性が高く、背景としても、デザインの主役としても活用できます。

写真編集の専門知識がなくても、コードで編集できる点もぼかし効果の魅力です。たとえば、CSSにはblur()関数が組み込まれています。さらにJavaScriptを使えば、ぼかし効果の可能性をさらに広げることができるでしょう。

写真にシンプルなぼかし効果をつけたり、動画やアニメーションと組み合わせてインタラクティブにしたり、さまざまな使いかたを模索してみてください。

（執筆：Eric Karkovack　翻訳：Asuka Nakajima　編集：少年B　提供元：speckyboy）