ぼんやり光るオーラ（グロー・オーラ）のCSSジェネレーター
要素の背後に柔らかい発光エフェクトを追加し、呼吸するように明滅するアニメーションを付与するツールです。
プレビュー
<div class="glow-aura">
<span>Glow Aura</span>
</div>/* オーラを付与する要素のスタイル */
.glow-aura {
position: relative;
display: inline-block;
padding: 20px 40px;
/* background-color: #ffffff; */
border-radius: {{aura_radius}}px;
z-index: 1;
}
/* 背後のオーラ（擬似要素） */
.glow-aura::after {
content: "";
position: absolute;
top: -{{aura_spread}}px;
left: -{{aura_spread}}px;
right: -{{aura_spread}}px;
bottom: -{{aura_spread}}px;
background-color: {{aura_color}};
filter: blur({{aura_blur}}px);
opacity: {{aura_opacity}};
border-radius: inherit;
z-index: -1;
animation: aura-pulse {{aura_duration}}s infinite alternate ease-in-out;
}
/* 呼吸するようなアニメーション */
@keyframes aura-pulse {
from {
transform: scale(1);
opacity: {{aura_opacity}};
}
to {
transform: scale({{aura_scale}});
opacity: calc({{aura_opacity}} * 0.7);
}
}機能、使い方
- 要素の背後に柔らかく広がる発光エフェクト（オーラ）を生成します。
::after擬似要素を使用しているため、メイン要素のレイアウトを崩さずに装飾が可能です。- アニメーション時間を調整することで、呼吸するようにゆっくりと明滅させることができます。
- カード要素、ボタン、アイコンなどの強調したいパーツに最適です。
CSSプロパティの説明
position: relativeとz-indexを組み合わせることで、擬似要素を背面に配置しています。
filter: blur()を使用して、背景色をぼかして柔らかい光を表現しています。
animationプロパティと@keyframesにより、transform: scale()を変化させ、動的な演出を加えています。
border-radius: inheritを指定することで、親要素の角丸設定をオーラにも自動で継承させています。
