Fire Glow Background
Soft flames lick up from the bottom edge and flicker at different speeds over a breathing heat glow, with your accent as the hot base color. Each flame is a blurred teardrop that only transforms.
Also known as: fire background css, flame animation background, burning fire css.
HTML
<div class="bgx-fire-glow" aria-hidden="true"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
CSS
.bgx-fire-glow {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
background: linear-gradient(to top, #1f0703, #0b0404 55%, #050303);
isolation: isolate;
}
.bgx-fire-glow::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 75% 60% at 50% 100%, rgb(255 120 40 / 0.55), rgb(200 40 10 / 0.25) 50%, transparent 78%);
transform-origin: 50% 100%;
animation: bgx-fire-glow-heat 3s ease-in-out infinite alternate;
}
.bgx-fire-glow::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2.2em;
background: linear-gradient(to top, oklch(from var(--c) 0.66 0.2 calc(h + 0) / 0.5), transparent);
mix-blend-mode: screen;
}
.bgx-fire-glow span {
position: absolute;
left: var(--x);
bottom: -1em;
width: var(--w);
height: calc(var(--w) * 1.9);
translate: -50% 0;
transform-origin: 50% 100%;
mix-blend-mode: screen;
animation: bgx-fire-glow-flicker var(--t) ease-in-out var(--d) infinite alternate;
}
.bgx-fire-glow span::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
aspect-ratio: 1;
border-radius: 50% 0 50% 50%;
background: radial-gradient(circle at 34% 66%, #fff6cf, #ffd04a 22%, #ff7a1a 50%, rgb(220 40 10 / 0.7) 78%, transparent);
transform: scaleY(1.9) rotate(-45deg);
transform-origin: 50% 100%;
filter: blur(0.45em);
}
.bgx-fire-glow span:nth-child(1) { --x: 10%; --w: 5em; --t: 1.3s; --d: -0.2s; }
.bgx-fire-glow span:nth-child(2) { --x: 26%; --w: 6.5em; --t: 1.7s; --d: -0.9s; }
.bgx-fire-glow span:nth-child(3) { --x: 42%; --w: 5.5em; --t: 1.1s; --d: -0.5s; }
.bgx-fire-glow span:nth-child(4) { --x: 57%; --w: 7em; --t: 1.9s; --d: -1.3s; }
.bgx-fire-glow span:nth-child(5) { --x: 72%; --w: 5em; --t: 1.4s; --d: -0.3s; }
.bgx-fire-glow span:nth-child(6) { --x: 87%; --w: 6em; --t: 1.6s; --d: -1.1s; }
.bgx-fire-glow span:nth-child(7) { --x: 50%; --w: 4em; --t: 1.2s; --d: -0.7s; }
@keyframes bgx-fire-glow-flicker {
0% { transform: scale(1, 0.82) skewX(-5deg); opacity: 0.8; }
50% { transform: scale(0.9, 1.12) skewX(4deg); opacity: 1; }
100% { transform: scale(1.04, 0.94) skewX(-2deg); opacity: 0.9; }
}
@keyframes bgx-fire-glow-heat {
from { transform: scaleY(0.9); opacity: 0.75; }
to { transform: scaleY(1.08); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-fire-glow, .bgx-fire-glow *, .bgx-fire-glow::before, .bgx-fire-glow::after, .bgx-fire-glow *::before, .bgx-fire-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.