ブロブ背景アニメ
ブロブ背景アニメは、有機的にうねる流体のような塊をぼかして背景に漂わせる演出です。 ::before 疑似要素に円形のグラデーションを置き、 border-radius を縦横で不揃いに指定して歪んだ形を作り、 @keyframes でその形・拡大率・回転を時間で変化させています。
解説
ブロブ背景アニメは、有機的にうねる流体のような塊をぼかして背景に漂わせる演出です。::before 疑似要素に円形のグラデーションを置き、border-radius を縦横で不揃いに指定して歪んだ形を作り、@keyframes でその形・拡大率・回転を時間で変化させています。filter:blur(30px) でエッジを溶かすことで、輪郭の硬さが消えて柔らかな光の塊に見えます。
使う場面
- ヒーローセクションやヘッダーの背景に動きを足したいとき
- SaaSやクリエイティブ系サイトの先進的な雰囲気づくり
- テキストを前面に置いた装飾的なカードの背面
色は radial-gradient の2色を変えると印象が一変します。動きの速さは bb の 8s で、ぼかしの強さは blur の数値で調整します。前面の文字は position:relative で重なり順を確保しているため読みやすさは保てますが、背景色とのコントラストは必ず確認してください。常時動き続ける演出なので、prefers-reduced-motion で停止させる配慮を入れると親切です。
使用例・適したシーン
- LP の演出強化
- 記事の読了率向上
- ストーリーテリング表現
よくある質問
ブロブの色を変えるにはどこを編集しますか
背景の radial-gradient に指定した2色を変更します。グラデーションの組み合わせで全体の雰囲気が大きく変わります。
ぼかしや動きの速さは調整できますか
ぼかしは filter の blur の数値、動く速さは @keyframes を呼ぶ animation の秒数で調整します。数値を大きくするとゆっくり柔らかい印象になります。