CSS31 · זוהר צפוני ברקע (בלי WebGL)

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}

/* CSS31 · זוהר צפוני ברקע (בלי WebGL) */
.au{position:relative;height:clamp(360px,62vh,560px);overflow:hidden;border-radius:var(--r, 14px);background:#07081a;display:grid;place-items:center;text-align:center;color:#fff;padding:24px;isolation:isolate}
.au-b{position:absolute;width:60%;aspect-ratio:1;border-radius:50%;filter:blur(70px);opacity:.75;mix-blend-mode:screen;will-change:transform;animation:au-a var(--t) ease-in-out infinite alternate}
.au-b.a{background:var(--accent, #4a3aff);top:-25%;left:-15%;--t:9s}
.au-b.b{background:#2bd4c8;bottom:-30%;right:-12%;--t:11s;animation-name:au-b2;animation-delay:-4s}
.au-b.c{background:#ff5fa2;top:12%;left:28%;width:48%;--t:13s;animation-name:au-c2;animation-delay:-7s;opacity:.6}
@keyframes au-a{from{transform:translate(-10%,-8%) scale(.95)}to{transform:translate(44%,28%) scale(1.35)}}
@keyframes au-b2{from{transform:translate(12%,10%) scale(1.3)}to{transform:translate(-40%,-24%) scale(.9)}}
@keyframes au-c2{from{transform:translate(-32%,12%) scale(1.05);opacity:.6}to{transform:translate(36%,-20%) scale(1.45);opacity:.3}}
.au-txt{position:relative;z-index:1;max-width:30ch}
.au-txt h2{margin:0 0 12px;font-size:var(--fs-h2, clamp(28px, 1.9vw + 0.5rem, 52px))}
.au-txt p{margin:0;color:rgba(255,255,255,.92)}
.au-txt::before{content:"";position:absolute;inset:-40px -60px;background:radial-gradient(closest-side,rgba(7,8,26,.55),transparent);z-index:-1;border-radius:50%}
@media (max-width:767px){.au-b{filter:blur(44px)}}
@media (prefers-reduced-motion: reduce){.au-b{animation:none}}

HTML

<div class="stage tight"><div class="au">
  <span class="au-b a"></span><span class="au-b b"></span><span class="au-b c"></span>
  <div class="au-txt"><h2>הפלטפורמה שמנהלת את הלקוחות בשבילכם</h2><p>לידים, הצעות מחיר, גבייה ומעקב. במקום אחד, בעברית.</p></div>
</div></div>