Burn Away Text
A glowing, charred edge eats across the word from left to right like burning paper, then the letters grow back from embers. An SVG filter thresholds noise plus a ramp, animated with SMIL.
Also known as: burning text effect, paper burn text css, text burning away animation, dissolve burn effect.
Burn Notice
HTML
<div class="txt-burn-away-text">
<svg class="txt-burn-away-text-defs" aria-hidden="true" focusable="false">
<filter id="txt-burn-away-text-burn" x="-5%" y="-20%" width="110%" height="140%" color-interpolation-filters="sRGB">
<feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="3" seed="11" result="n" />
<feImage href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' preserveAspectRatio='none'%3E%3ClinearGradient id='g' x2='1' y2='0.35'%3E%3Cstop offset='0' stop-opacity='0'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3Crect width='10' height='10' fill='url(%23g)'/%3E%3C/svg%3E" preserveAspectRatio="none" result="ramp" />
<feComposite in="n" in2="ramp" operator="arithmetic" k2="0.45" k3="0.55" result="mix" />
<feComponentTransfer in="mix" result="keep">
<feFuncA type="linear" slope="10" intercept="0.2">
<animate attributeName="intercept" dur="5.6s" repeatCount="indefinite" calcMode="spline" keyTimes="0;0.62;0.8;0.83;1" keySplines="0 0 1 1;0.35 0 0.65 1;0 0 1 1;0.4 0 0.6 1" values="0.2;0.2;-10.2;-10.2;0.2" />
</feFuncA>
</feComponentTransfer>
<feComponentTransfer in="mix" result="edge">
<feFuncA type="linear" slope="10" intercept="1.4">
<animate attributeName="intercept" dur="5.6s" repeatCount="indefinite" calcMode="spline" keyTimes="0;0.62;0.8;0.83;1" keySplines="0 0 1 1;0.35 0 0.65 1;0 0 1 1;0.4 0 0.6 1" values="1.4;1.4;-9;-9;1.4" />
</feFuncA>
</feComponentTransfer>
<feComponentTransfer in="mix" result="core">
<feFuncA type="linear" slope="10" intercept="-0.4">
<animate attributeName="intercept" dur="5.6s" repeatCount="indefinite" calcMode="spline" keyTimes="0;0.62;0.8;0.83;1" keySplines="0 0 1 1;0.35 0 0.65 1;0 0 1 1;0.4 0 0.6 1" values="-0.4;-0.4;-10.8;-10.8;-0.4" />
</feFuncA>
</feComponentTransfer>
<feComposite in="SourceGraphic" in2="keep" operator="in" result="alive" />
<feComposite in="keep" in2="core" operator="out" result="scorch" />
<feFlood flood-color="#3b1a08" flood-opacity="0.8" />
<feComposite in2="scorch" operator="in" />
<feComposite in2="alive" operator="in" result="char" />
<feComposite in="edge" in2="keep" operator="out" result="ring" />
<feFlood flood-color="#ffb347" />
<feComposite in2="ring" operator="in" />
<feComposite in2="SourceGraphic" operator="in" result="glow" />
<feGaussianBlur in="glow" stdDeviation="1.4" result="soft" />
<feMerge><feMergeNode in="soft" /><feMergeNode in="glow" /><feMergeNode in="alive" /><feMergeNode in="char" /></feMerge>
</filter>
</svg>
<span class="txt-burn-away-text-word">Burn Notice</span>
</div>CSS
.txt-burn-away-text {
--c: var(--txt-color, #3b82f6);
font-size: calc(var(--txt-size, 32px) * 1.5);
font-family: system-ui, sans-serif;
font-weight: 900;
line-height: 1.2;
position: relative;
display: inline-block;
letter-spacing: -0.01em;
animation: txt-burn-away-text-heat 5.6s ease-in-out infinite;}
.txt-burn-away-text-defs {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.txt-burn-away-text-word {
display: block;
color: var(--c);
filter: url(#txt-burn-away-text-burn);
}
/* A warm cast while the edges burn, on the same clock as the SVG filter. */
@keyframes txt-burn-away-text-heat {
0%, 58%, 100% { filter: drop-shadow(0 0 0 rgb(249 115 22 / 0)); }
68%, 76% { filter: drop-shadow(0 0 0.08em rgb(249 115 22 / 0.35)); }
92% { filter: drop-shadow(0 0 0.06em rgb(249 115 22 / 0.3)); }
}
@media (prefers-reduced-motion: reduce) {
.txt-burn-away-text { animation: none; }
.txt-burn-away-text-word { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
.txt-burn-away-text, .txt-burn-away-text *, .txt-burn-away-text::before, .txt-burn-away-text::after, .txt-burn-away-text *::before, .txt-burn-away-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.