オーロラ背景のCSSジェネレーター
オーロラのようなアニメーションのある背景をCSSのみで生成。モダンなSaaSやポートフォリオに適した演出が可能です。
プレビュー
<div class="aurora-container">
<div class="aurora-blob" style="--i:1; --clr:{{color1}}; --anim:aurora-1"></div>
<div class="aurora-blob" style="--i:2; --clr:{{color2}}; --anim:aurora-2"></div>
<div class="aurora-blob" style="--i:3; --clr:{{color3}}; --anim:aurora-3"></div>
<div class="aurora-blob" style="--i:4; --clr:{{color4}}; --anim:aurora-4"></div>
<div class="aurora-blob" style="--i:5; --clr:{{color5}}; --anim:aurora-5"></div>
</div>.aurora-container {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
background: #000;
z-index: 0;
}
.aurora-container::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 50%, {{color2}}, {{color5}}, transparent);
opacity: 0.3;
filter: blur(80px);
}
.aurora-blob {
position: absolute;
/* 設定から取得 */
filter: blur({{blur}}px) saturate({{saturate}});
mix-blend-mode: screen;
opacity: 0.6;
border-radius: 50%;
/* 変数を使用した共通スタイル */
background: var(--clr);
/* --i を使ってサイズを分散 */
width: calc(600px + var(--i) * 100px);
height: calc(400px + var(--i) * 80px);
/* --i を使って速度とディレイ（初期位置のズレ）を自動計算 */
animation:
var(--anim)
calc({{speed}}s * (0.8 + var(--i) * 0.1))
ease-in-out infinite;
animation-delay: calc(var(--i) * -3s);
}
@keyframes aurora-1 {
0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
33% { transform: translate(20%, 10%) scale(1.2) rotate(10deg); }
66% { transform: translate(-10%, 20%) scale(0.8) rotate(-10deg); }
}
@keyframes aurora-2 {
0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
33% { transform: translate(-15%, 20%) scale(1.1) rotate(-15deg); }
66% { transform: translate(10%, -10%) scale(1.3) rotate(20deg); }
}
@keyframes aurora-3 {
0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
50% { transform: translate(25%, -20%) scale(1.4) rotate(15deg); }
}
@keyframes aurora-4 {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
33% { transform: translate(-20%, -30%) rotate(30deg); }
66% { transform: translate(10%, 15%) rotate(-20deg); }
}
@keyframes aurora-5 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-10%, 40%) scale(1.2); }
}機能・使い方
- リキッドアニメーション: 5つの巨大な色のマテリアルを複雑な軌道で動かし、強力なぼかしと彩度（Saturate）をかけることで、混ざり合う液体のような美しい背景を作ります。
- 暗さの解消: 背景自体に放射状のグラデーションを敷くことで、色が薄い部分でも常に鮮やかさを保ちます。
- 柔軟な設計: CSS変数と
calc()を多用することで、最小限のコード量で最大の視覚効果を得られるように設計されています。
CSSプロパティの説明
CSS変数（カスタムプロパティ）の活用方法
HTML側のstyle="--i:1; --clr:..."で定義した変数は、CSS側でvar(--変数名)として呼び出せます。
これにより、同じクラスを持ちながら「色」や「計算用のインデックス」だけが異なる要素を効率的に作成できます。
calc()による動的な計算について
calc(var(--i) * -3s)のように、変数と数値を掛け合わせることで、各レイヤーのサイズやアニメーションの遅延時間を自動算定しています。
手動で個別の値を設定することなく、数学的な規則に基づいた「ランダムに近いまばら感」をコードの簡略化と共に実現しています。
mix-blend-mode: screenでは、背景が黒の場合、色が重なれば重なるほど明るく（白に近く）なるブレンドモードです。これにより、光が混ざり合うようなリッチな発光感が生まれます。
ポイント
このコードは「共通化」と「独自性」のバランスを重視しています。アニメーションの軌道（@keyframes）をあえて分離しつつ、その他の共通プロパティをCSS変数で一括管理することで、可読性とデザインの質を両立させています。
