被写体にピントをあわせて背景をぼかすテクニックは、昔から写真で活用されてきました。いまでは写真以外でも、WebサイトにCSSやJavaScriptを使ってボケ効果を取り入れることも多いです。
本記事では、さまざまな種類のボケ効果を実装できるコードスニペット8種類を紹介します。
3D背景のボケ効果
ボケ効果は奥行きを感じさせますが、このスニペットはThree.jsによって3Dのアニメーションをつけ、奥行きをより深く見せています。背景をドラッグすると視点を変えられるのもポイントです。
See the Pen
Bokeh Lighting Background by Wakana Y.K. (@wakana-k)
on CodePen.0
（広告の後にも続きます）
ホタルのように漂うボケ効果
CSS Grid、アニメーション、フィルターを組み合わせて作られたスニペット。クリックするとJavaScriptによってデザインが切り替わります。アニメーションが控えめなので、ヒーローエリアやページの背景にもおすすめです。
See the Pen
Bokeh CSS Doodle by Crystal S (@CrystalS)
on CodePen.0
