rainbow gradient glow component

produces:

• A soft rainbow glow at the top
• Blurred into a light aura
• Subtle fade-in animation
• Works best on dark backgrounds

HTML

<div class="gradient-blur">
  <svg class="sr-only" aria-hidden="true">
    <defs>
      <filter id="gradient-blur">
        <feGaussianBlur in="SourceGraphic" stdDeviation="100"></feGaussianBlur>
      </filter>
    </defs>
  </svg>
</div>

CSS

body {
margin: 0;
height: 200vh;
background: #0a0a0a; /* dark background to see glow */
display: flex;
         justify-content: center;
         align-items: flex-start;
}

/* The glowing gradient blob */
.gradient-blur {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);

width: 80%;
       max-width: 900px;
height: 500px;

        border-radius: 9999px;
opacity: 0.3;
         pointer-events: none;

background: linear-gradient(
                98deg,
#f59e0b 1%,   /* amber */
#a3e635 18%,  /* lime */
#34d399 38%,  /* emerald */
#0ea5e9 58%,  /* sky */
#a855f7 79%,  /* purple */
#f43f5e 100%  /* rose */
                );

filter: url(#gradient-blur);

animation: fadeIn 0.6s ease-out;
}

/* Fade-in animation */
@keyframes fadeIn {
  from {
opacity: 0;
transform: translate(-50%, -60%);
  }
  to {
opacity: 0.25;
transform: translate(-50%, -50%);
  }
}

/* Hide SVG but keep it functional */
.sr-only {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}```