Forged Hot Metal Text
Cold steel letters heat up one by one, from deep red through orange to white hot, then cool back to grey like iron on an anvil. Each letter animates color and a two layer glow on a stagger.
Also known as: hot metal text effect, molten text animation, glowing hot text css, forge text.
HTML
<div class="txt-forged-metal-text"><span style="--i: 0">F</span><span style="--i: 1">O</span><span style="--i: 2">R</span><span style="--i: 3">G</span><span style="--i: 4">E</span><span style="--i: 5">D</span></div>
CSS
.txt-forged-metal-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;
letter-spacing: 0.08em;
white-space: nowrap;}
.txt-forged-metal-text span {
display: inline-block;
color: color-mix(in srgb, var(--c) 10%, #5b5f69);
text-shadow: 0 -0.02em 0 rgb(255 255 255 / 0.18), 0 0 0 rgb(249 115 22 / 0);
animation: txt-forged-metal-text-heat 4.2s cubic-bezier(0.4, 0, 0.3, 1) calc(var(--i) * 0.16s) infinite;
}
@keyframes txt-forged-metal-text-heat {
0%, 8%, 100% { color: color-mix(in srgb, var(--c) 10%, #5b5f69); text-shadow: 0 -0.02em 0 rgb(255 255 255 / 0.18), 0 0 0 rgb(249 115 22 / 0); }
22% { color: #991b1b; text-shadow: 0 0 0.06em rgb(220 38 38 / 0.6), 0 0 0.2em rgb(127 29 29 / 0.4); }
34% { color: #f97316; text-shadow: 0 0 0.08em rgb(251 146 60 / 0.9), 0 0 0.3em rgb(234 88 12 / 0.55); }
44% { color: #fff7d6; text-shadow: 0 0 0.06em #fbbf24, 0 0 0.4em rgb(249 115 22 / 0.85); }
62% { color: #ea580c; text-shadow: 0 0 0.06em rgb(234 88 12 / 0.7), 0 0 0.24em rgb(194 65 12 / 0.45); }
80% { color: #7f1d1d; text-shadow: 0 0 0.04em rgb(127 29 29 / 0.5), 0 0 0.1em rgb(69 10 10 / 0.2); }
}
@media (prefers-reduced-motion: reduce) {
.txt-forged-metal-text span { animation: none; color: #f97316; text-shadow: 0 0 0.08em rgb(251 146 60 / 0.9), 0 0 0.3em rgb(234 88 12 / 0.55); }
}
@media (prefers-reduced-motion: reduce) {
.txt-forged-metal-text, .txt-forged-metal-text *, .txt-forged-metal-text::before, .txt-forged-metal-text::after, .txt-forged-metal-text *::before, .txt-forged-metal-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.