ヒーローの見出しの後ろで円錐グラデーションの光が回る

デモ

仕様

用途: ヒーロー
動作: DOM
種類: レシピ
動作確認: three 0.186.0・gsap 3.15.0
公開日: 2026年9月13日

しくみと調整

見出しの後ろに、円錐グラデーションの光の輪を置いています。角度は CSS のカスタムプロパティ --spin だけを回しているので、光の色の並び自体はいつも同じに保たれます。輪の柔らかさは、ぼかしではなく mask で作っています。

この --spin を数値としてアニメーションさせるには、@property での事前の登録が欠かせません。登録しないと、角度の変化がなめらかにならず、コマ送りのように飛び飛びに変わってしまいます。輪の内側では逆向きに回る細い光も重ね、単調にならないようにしています。

光の呼吸（明るさの変化）は 2 つの輪でそれぞれ別のタイミングにしてあり、単調な点滅にならないようにしています。動きを減らす設定のときは、回転も呼吸もすべて止め、光が固定された 1 枚の静止画として見えるようにしています。

光の色の並びや輪の大きさ、回る速さを変えるだけで、印象を大きく変えられます。暗い背景と相性がよく、SaaS やプロダクトのローンチ、AI 系サービスなど、引き締まった雰囲気を出したいヒーローに向いています。

コード

HTML

<section class="glow-hero">
  <!-- 背景は飾りなので、読み上げからは外す -->
  <div class="glow-hero__glow" aria-hidden="true">
    <div class="glow-hero__bloom"></div>
    <div class="glow-hero__halo"></div>
    <div class="glow-hero__sparkle"></div>
    <div class="glow-hero__core"></div>
  </div>
  <div class="glow-hero__inner">
    <p class="glow-hero__eyebrow">Launch</p>
    <h1 class="glow-hero__title">チームの仕事を、<br>ひとつの場所で。</h1>
    <p class="glow-hero__lead">ここに説明文が入ります。</p>
    <a class="glow-hero__button" href="/demo/">デモを予約する</a>
  </div>
</section>

CSS

/* 角度をアニメーションできるように登録する（登録しないと CSS の変化が飛び飛びになる） */
@property --spin { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --counter { syntax: "<angle>"; inherits: true; initial-value: 0deg; }

.glow-hero {
  --bg: #111111; --ink: #eeece6; --spectrum: #6290ad, #87b4d5, #aa95da, #e48b85, #e4bb87, #ecdbbd, #decf6d, #98d093, #6290ad; --gutter: clamp(24px, 7vw, 96px);
  position: relative; display: grid; place-items: center; min-height: min(90vh, 720px); padding: 0 var(--gutter);
  overflow: hidden; text-align: center; color: var(--ink); background-color: var(--bg);
  /* 1 周（360deg）で戻るので、無限に回してもループがつながる */
  animation: glow-spin 10s linear infinite, glow-counter 10s linear infinite;
}

.glow-hero__glow { position: absolute; inset: 0; pointer-events: none; container-type: size; } /* 子の cqh を、この箱の高さから決める */
.glow-hero__glow > div { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); border-radius: 50%; }

.glow-hero__bloom {
  width: 209cqh; height: 135cqh; opacity: 0.36; animation: glow-bloom-breathe 5s ease-in-out infinite;
  background: conic-gradient(from calc(var(--spin) + 40deg), var(--spectrum));
  -webkit-mask-image: radial-gradient(closest-side, transparent 38%, #000 66%, transparent 100%);
  mask-image: radial-gradient(closest-side, transparent 38%, #000 66%, transparent 100%);
}

.glow-hero__halo {
  width: 155cqh; height: 90cqh; opacity: 0.86; animation: glow-halo-breathe 5s ease-in-out infinite;
  background: conic-gradient(from var(--spin), var(--spectrum));
  -webkit-mask-image: radial-gradient(closest-side, transparent 60%, #000 77%, rgba(0, 0, 0, 0.35) 88%, transparent 100%);
  mask-image: radial-gradient(closest-side, transparent 60%, #000 77%, rgba(0, 0, 0, 0.35) 88%, transparent 100%);
}

/* 逆向きに回る 2 本のきらめき */
.glow-hero__sparkle {
  width: 150cqh; height: 87cqh; mix-blend-mode: screen;
  background: conic-gradient(from var(--counter), transparent 0deg, rgba(255, 255, 255, 0.9) 18deg, transparent 40deg, transparent 180deg, rgba(255, 255, 255, 0.7) 198deg, transparent 220deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 72%, #000 78%, transparent 84%);
  mask-image: radial-gradient(closest-side, transparent 72%, #000 78%, transparent 84%);
}

/* 内側を地の色で締めて、見出しを読みやすくする */
.glow-hero__core { width: 124cqh; height: 72cqh; background: radial-gradient(closest-side, var(--bg) 55%, transparent 100%); }

@keyframes glow-spin { to { --spin: 360deg; } }
@keyframes glow-counter { to { --counter: -720deg; } }
@keyframes glow-halo-breathe { 0%, 100% { opacity: 0.86; } 25% { opacity: 1; } 75% { opacity: 0.72; } }
@keyframes glow-bloom-breathe { 0%, 100% { opacity: 0.36; } 25% { opacity: 0.48; } 75% { opacity: 0.24; } }

.glow-hero__inner { position: relative; max-width: 34em; } /* 背景の上に載せる */
.glow-hero__eyebrow { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.glow-hero__title { margin: 24px 0 0; font-size: clamp(38px, 8vw, 68px); line-height: 1.05; letter-spacing: -0.02em; }
.glow-hero__lead { margin: 24px 0 0; font-size: 18px; line-height: 1.8; }

.glow-hero__button {
  display: inline-grid; place-items: center; height: 48px; margin-top: 32px; padding: 0 32px; border-radius: 999px;
  background-color: var(--ink); color: var(--bg); font-size: 15px; font-weight: 600; letter-spacing: 0.04em; text-decoration: none;
}

.glow-hero__button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* 動きを減らす設定では、角度もにじみの呼吸も止める */
@media (prefers-reduced-motion: reduce) {
  .glow-hero, .glow-hero__bloom, .glow-hero__halo { animation: none; }
}