Licking Flames Text
Clean tongues of flame rise from the tops of white hot letters on a dark card and never repeat a shape. Masked rising text-shadows are torn into tongues by SVG turbulence.
Also known as: fire text animation, css fire effect, fire effect css, flame text svg filter.
Inferno
HTML
<div class="txt-licking-flames-text">
<svg class="txt-licking-flames-text-defs" aria-hidden="true" focusable="false">
<filter id="txt-licking-flames-text-lick" x="-20%" y="-40%" width="140%" height="160%">
<feTurbulence type="fractalNoise" baseFrequency="0.11 0.035" numOctaves="2" seed="7">
<animate attributeName="baseFrequency" dur="2.2s" values="0.11 0.035;0.12 0.06;0.11 0.035" repeatCount="indefinite" />
</feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="14" xChannelSelector="R" yChannelSelector="G" />
</filter>
</svg>
<span class="txt-licking-flames-text-flames" aria-hidden="true">Inferno</span>
<span class="txt-licking-flames-text-word">Inferno</span>
</div>CSS
.txt-licking-flames-text {
--c: var(--txt-color, #3b82f6);
font-size: calc(var(--txt-size, 32px) * 1.6);
font-family: system-ui, sans-serif;
font-weight: 800;
line-height: 1.2;
position: relative;
display: inline-grid;
isolation: isolate;
padding: 0.75em 0.9em 0.35em;
border-radius: 0.4em;
background:
radial-gradient(70% 55% at 50% 100%, rgb(234 88 12 / 0.22), transparent 70%),
linear-gradient(180deg, #0f0d0c, #17120f);
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06), 0 0.35em 0.9em -0.35em rgb(0 0 0 / 0.6);
letter-spacing: 0.01em;}
.txt-licking-flames-text-defs {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.txt-licking-flames-text > span {
grid-area: 1 / 1;
}
/* Transparent letters cast a short stack of rising shadows; the mask keeps
only what rises above the letter tops, and the filter tears it into tongues. */
.txt-licking-flames-text-flames {
color: transparent;
padding: 0.8em 0.25em 0;
margin: -0.8em -0.25em 0;
-webkit-mask: linear-gradient(0deg, transparent 0.82em, #000 1.02em, #000 1.3em, transparent 2.05em);
mask: linear-gradient(0deg, transparent 0.82em, #000 1.02em, #000 1.3em, transparent 2.05em);
filter: url(#txt-licking-flames-text-lick);
animation: txt-licking-flames-text-flicker 1.8s ease-in-out infinite;
}
.txt-licking-flames-text-word {
background: linear-gradient(180deg, #fff 35%, #ffefc7 70%, #ffc979 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 0.05em rgb(251 146 60 / 0.55)) drop-shadow(0 0 0.2em rgb(234 88 12 / 0.35));
}
@keyframes txt-licking-flames-text-flicker {
0%, 100% {
text-shadow: 0 -0.05em 0.03em #fff1c2, 0 -0.13em 0.05em #ffc96b, 0 -0.25em 0.09em rgb(249 115 22 / 0.85), 0 -0.4em 0.15em rgb(234 88 12 / 0.45);
}
50% {
text-shadow: 0 -0.07em 0.03em #fff1c2, 0 -0.17em 0.05em #ffc96b, 0 -0.31em 0.09em rgb(249 115 22 / 0.85), 0 -0.5em 0.16em rgb(234 88 12 / 0.4);
}
}
@media (prefers-reduced-motion: reduce) {
.txt-licking-flames-text-flames { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
.txt-licking-flames-text, .txt-licking-flames-text *, .txt-licking-flames-text::before, .txt-licking-flames-text::after, .txt-licking-flames-text *::before, .txt-licking-flames-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.