Aurora Background

DEMO

CODE

<div class="demo-stage" style="padding:0"><div class="au-box"><div class="au-blob au-1"></div><div class="au-blob au-2"></div><div class="au-blob au-3"></div><span>AURORA</span></div></div>

.au-box { position:relative; min-height:280px; background:#0E0E12; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.au-blob { position:absolute; border-radius:50%; filter:blur(62px); opacity:.72; }
.au-1 { width:260px; height:260px; background:#E91B89; top:-70px; left:-40px; animation:au-f1 9s ease-in-out infinite; }
.au-2 { width:220px; height:220px; background:#7B37A8; bottom:-70px; right:-30px; animation:au-f2 11s ease-in-out infinite; }
.au-3 { width:200px; height:200px; background:#5BAADE; top:40px; right:90px; animation:au-f3 13s ease-in-out infinite; }
.au-box span { position:relative; z-index:2; font-family:'Oswald',sans-serif; font-size:2.2rem; letter-spacing:.3em; color:#fff; }
@keyframes au-f1 { 0%,100% { transform:translate(0,0); } 50% { transform:translate(60px,40px); } }
@keyframes au-f2 { 0%,100% { transform:translate(0,0); } 50% { transform:translate(-50px,-32px); } }
@keyframes au-f3 { 0%,100% { transform:translate(0,0); } 50% { transform:translate(-42px,52px); } }

AI PROMPT

オーロラ風のぼかし背景を作って。暗い背景の上に円形のblob3つ（ピンク/紫/青）をposition:absoluteで配置、filter:blur(62px)で大きくぼかす。各blobにtranslateで漂うkeyframeを別速度（9s/11s/13s）で与える。コンテナはoverflow:hidden、中央テキストはz-index:2で前面。

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。