Fire Text Effect
Flame tongues rise through red and orange letters while a blurred orange glow flickers behind them. The fill is tiled radial gradients moving up; the glow only animates transform and opacity.
Also known as: flame text css, burning text animation, fire gradient text.
ON FIRE
HTML
<div class="txt-fire-text-effect" data-text="ON FIRE"><span>ON FIRE</span></div>
CSS
.txt-fire-text-effect {
--c: var(--txt-color, #3b82f6);
font-size: var(--txt-size, 32px);
font-family: system-ui, sans-serif;
font-weight: 700;
line-height: 1.2;
position: relative;
isolation: isolate;
white-space: nowrap;
font-weight: 900;
letter-spacing: 0.04em;}
.txt-fire-text-effect::before {
content: attr(data-text);
content: attr(data-text) / "";
position: absolute;
inset: 0;
z-index: -1;
color: #fb923c;
filter: blur(0.1em);
transform-origin: 50% 100%;
animation: txt-fire-text-effect-flicker 1.7s ease-in-out infinite;
}
.txt-fire-text-effect span {
background:
radial-gradient(ellipse 45% 60% at 50% 100%, rgb(254 240 138 / 0.95), transparent 72%) 0 0 / 0.9em 1.3em,
radial-gradient(ellipse 40% 55% at 50% 100%, rgb(253 186 116 / 0.85), transparent 72%) 0.45em 0 / 0.6em 0.9em,
linear-gradient(0deg, #facc15 0%, #f97316 38%, #dc2626 72%, #991b1b 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
animation: txt-fire-text-effect-rise 1.3s linear infinite;
}
@keyframes txt-fire-text-effect-rise {
to { background-position: 0 -1.3em, 0.45em -1.8em, 0 0; }
}
@keyframes txt-fire-text-effect-flicker {
0%, 100% { opacity: 0.5; transform: translateY(-0.03em) scaleY(1); }
25% { opacity: 0.8; transform: translateY(-0.07em) scaleY(1.1); }
50% { opacity: 0.45; transform: translateY(-0.03em) scaleY(1.03); }
70% { opacity: 0.75; transform: translateY(-0.09em) scaleY(1.14); }
}
@media (prefers-reduced-motion: reduce) {
.txt-fire-text-effect, .txt-fire-text-effect *, .txt-fire-text-effect::before, .txt-fire-text-effect::after, .txt-fire-text-effect *::before, .txt-fire-text-effect *::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.