Breathing Glow Background
A soft glow in the middle of a dark surface slowly swells and fades on a six second breath, with a wider halo lagging just behind. Calm behind a hero, a player or an AI chat.
Also known as: pulsing glow background css, breathing light animation, radial glow pulse.
HTML
<div class="bgx-breathing-glow" aria-hidden="true"><span></span><span></span></div>
CSS
.bgx-breathing-glow {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
background: #050608;
}
.bgx-breathing-glow span {
position: absolute;
left: 50%;
top: 50%;
aspect-ratio: 1;
translate: -50% -50%;
border-radius: 50%;
animation: bgx-breathing-glow-breathe 6s cubic-bezier(0.45, 0, 0.55, 1) var(--d) infinite;
}
.bgx-breathing-glow span:nth-child(1) {
--d: -0.4s;
width: max(34em, 60%);
background: radial-gradient(closest-side, oklch(from var(--c) 0.62 0.18 calc(h + 40) / 0.5), oklch(from var(--c) 0.5 0.16 calc(h + 40) / 0.18) 55%, transparent);
}
.bgx-breathing-glow span:nth-child(2) {
--d: -1s;
width: max(16em, 30%);
background: radial-gradient(closest-side, oklch(from var(--c) 0.95 0.05 calc(h + 0) / 0.9), oklch(from var(--c) 0.7 0.18 calc(h + 0) / 0.7) 35%, oklch(from var(--c) 0.6 0.2 calc(h + 0) / 0.2) 70%, transparent);
}
@keyframes bgx-breathing-glow-breathe {
0%, 100% { transform: scale(0.72); opacity: 0.45; }
40% { transform: scale(1.06); opacity: 1; }
55% { transform: scale(1.02); opacity: 0.95; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-breathing-glow, .bgx-breathing-glow *, .bgx-breathing-glow::before, .bgx-breathing-glow::after, .bgx-breathing-glow *::before, .bgx-breathing-glow *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--bgx-coloron the element or a parent. Currently previewing#3b82f6. - Pattern scale: set
--bgx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.