Rising Embers Text
A word that glows hot at the bottom and chars dark at the top, with tiny embers drifting up off it and fading out. Twelve spans float on their own timing while the glow slowly breathes.
Also known as: embers text effect, fire sparks text css, glowing embers animation, campfire text.
Campfire
HTML
<div class="txt-rising-embers-text"> <span class="txt-rising-embers-text-word">Campfire</span> <span class="txt-rising-embers-text-sparks" aria-hidden="true"><i style="--x: 6%; --d: 0s; --t: 2.8s; --dx: 0.25em; --s: 0.07em"></i><i style="--x: 14%; --d: -1.9s; --t: 3.4s; --dx: -0.2em; --s: 0.05em"></i><i style="--x: 22%; --d: -0.7s; --t: 2.6s; --dx: 0.35em; --s: 0.08em"></i><i style="--x: 31%; --d: -2.4s; --t: 3.1s; --dx: -0.3em; --s: 0.06em"></i><i style="--x: 39%; --d: -1.2s; --t: 2.9s; --dx: 0.15em; --s: 0.09em"></i><i style="--x: 47%; --d: -0.3s; --t: 3.6s; --dx: -0.25em; --s: 0.05em"></i><i style="--x: 55%; --d: -2.1s; --t: 2.7s; --dx: 0.3em; --s: 0.07em"></i><i style="--x: 63%; --d: -1.5s; --t: 3.2s; --dx: -0.1em; --s: 0.06em"></i><i style="--x: 71%; --d: -0.9s; --t: 2.5s; --dx: 0.28em; --s: 0.08em"></i><i style="--x: 79%; --d: -2.7s; --t: 3.3s; --dx: -0.32em; --s: 0.05em"></i><i style="--x: 87%; --d: -0.5s; --t: 3s; --dx: 0.2em; --s: 0.07em"></i><i style="--x: 94%; --d: -1.7s; --t: 2.8s; --dx: -0.18em; --s: 0.06em"></i></span> </div>
CSS
.txt-rising-embers-text {
--c: var(--txt-color, #3b82f6);
font-size: calc(var(--txt-size, 32px) * 1.6);
font-family: system-ui, sans-serif;
font-weight: 900;
line-height: 1.2;
position: relative;
display: inline-block;
padding: 1.1em 0.2em 0;
letter-spacing: 0.01em;}
.txt-rising-embers-text-word {
display: block;
background: linear-gradient(0deg, #fed7aa 0%, #fb923c 26%, #c2410c 55%, #431407 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
animation: txt-rising-embers-text-breathe 3.2s ease-in-out infinite;
}
.txt-rising-embers-text-sparks {
position: absolute;
inset: 0 0 0.35em;
pointer-events: none;
}
.txt-rising-embers-text-sparks i {
position: absolute;
left: var(--x);
bottom: 0;
width: var(--s);
height: var(--s);
border-radius: 50%;
background: #fff7ed;
box-shadow: 0 0 0.05em 0.02em #fdba74, 0 0 0.16em 0.03em rgb(234 88 12 / 0.85);
opacity: 0;
animation: txt-rising-embers-text-float var(--t) cubic-bezier(0.25, 0.4, 0.5, 1) var(--d) infinite;
}
@keyframes txt-rising-embers-text-float {
0% { opacity: 0; transform: translate(0, 0) scale(1); }
12% { opacity: 1; }
45% { transform: translate(calc(var(--dx) * -0.6), -0.9em) scale(0.85); }
70% { opacity: 0.8; }
100% { opacity: 0; transform: translate(var(--dx), -1.9em) scale(0.3); }
}
@keyframes txt-rising-embers-text-breathe {
0%, 100% { filter: drop-shadow(0 0.02em 0.06em rgb(234 88 12 / 0.45)); }
50% { filter: drop-shadow(0 0.02em 0.16em rgb(249 115 22 / 0.8)); }
}
@media (prefers-reduced-motion: reduce) {
.txt-rising-embers-text-word, .txt-rising-embers-text-sparks i { animation: none; }
.txt-rising-embers-text-sparks i { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.txt-rising-embers-text, .txt-rising-embers-text *, .txt-rising-embers-text::before, .txt-rising-embers-text::after, .txt-rising-embers-text *::before, .txt-rising-embers-text *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--txt-coloron the element or a parent. Currently previewing#3b82f6. - Font size: set
--txt-size. Every other dimension is inem, so the whole thing scales together. Currently previewing40px. - 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.