CSSオーロラエフェクトの作り方｜背景・テキスト・ボタン・カード実装4選

オーロラ表現の基本原理

オーロラらしさは3つの要素で決まります。1) 多色グラデーション：シアン・紫・ピンク・緑など寒色を軸に3〜4色を混ぜる。2) ぼかし：filter:blur() や大きな background-size で色の境界を溶かす。3) ゆっくりした動き：6〜12秒周期で background-position や transform を往復させる。速く動かすと安っぽくなるため、周期は長めが鉄則です。

色は #22d3ee（シアン）→ #a78bfa（紫）→ #f472b6（ピンク）→ #34d399（緑）の組み合わせが扱いやすく、ダーク背景（#0F0F12 など）に載せると発色が最大化します。

パターン1：Aurora Background — 画面全体をオーロラに

ヒーローセクションの背景全体にオーロラを敷くパターン。ぼかした複数のグラデーションレイヤーを重ね、それぞれ異なる周期で漂わせます。最初に試すならこれ。

実装デモ：Aurora Background

パターン2：Aurora Text — 見出しの文字に光を流す

background-clip:text で文字の形にグラデーションを切り抜き、background-position を往復させて文字の中に光を流します。ヒーロー見出し・ブランドワード向け。グラデーションの両端を同じ色にするとループの継ぎ目が消えます。

実装デモ：Aurora Text

パターン3：Aurora Button — CTAの背後に発光を

::before 疑似要素をボタンより一回り大きく重ね、流れるグラデーションを blur で滲ませて背面に回します。本体のテキストは読みやすいまま、ページで最も押してほしいボタンに視線を集められます。

実装デモ：Aurora Button

パターン4：Aurora Card — カードの中でカーテンを揺らす

overflow:hidden のカード内に、ぼかした radial-gradient のブロブを2つ配置し、異なる周期（9秒と11秒など）で逆方向に動かします。周期をずらすことでループ感のない自然な揺らぎになります。料金プランのおすすめ枠に最適。

実装デモ：Aurora Card

あわせて使いたい関連エフェクト

オーロラと相性が良いのは、同じく「多色×ゆっくり」系のグラデーション表現です。背景を格子状に溶かす Mesh Gradient、色相が循環する Animated Gradient を組み合わせると世界観が統一できます。

実装デモ：Mesh Gradient、Animated Gradient

パフォーマンスと実装のコツ

blur は GPU 負荷が高め：filter:blur() を大面積に使うときは、動かすプロパティを transform と opacity に限定し、レイアウトを揺らさないようにします。will-change:transform の付与も有効です。

動きを止める配慮：前庭障害のあるユーザーのために @media (prefers-reduced-motion: reduce) で animation を止める分岐を入れると、アクセシビリティ監査にも通る実装になります。

モバイルでは面積を絞る：全画面オーロラはモバイルでバッテリー消費が増えるため、ヒーロー領域のみに限定するか、ブロブの数を減らすのが実務的です。