No animations match your search in this category.
The code for all 7 text effects, explained
Every effect above, with the markup to use and the complete CSS. Each one is self-contained: paste the CSS once, add the class, done.
Typewriter
steps(13) matches the 13 characters of “Hello, world.” — change both the ch width and step count to match your own text.
Markup
<span class="fh-typewriter">Hello, world.</span>
CSS
.fh-typewriter {
display: inline-block;
overflow: hidden;
white-space: nowrap;
font-family: monospace;
border-right: 2px solid currentColor;
width: 13ch;
animation:
fh-typing 2.2s steps(13) both,
fh-caret 0.7s step-end infinite;
}
@keyframes fh-typing {
from { width: 0; }
to { width: 13ch; }
}
@keyframes fh-caret {
50% { border-color: transparent; }
}
Gradient Flow
A gradient endlessly flowing through the letters. background-clip: text does the masking; the 300% size gives it room to travel.
Markup
<h1 class="fh-text-gradient">Your headline</h1>
CSS
.fh-text-gradient {
background: linear-gradient(90deg,
#8b5cf6, #06b6d4, #10b981, #8b5cf6);
background-size: 300% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: fh-gradientFlow 4s linear infinite;
}
@keyframes fh-gradientFlow {
to { background-position: 300% 0; }
}
Letter Wave
Each letter sits in its own span with a staggered delay. Add more nth-child rules for longer words.
Markup
<span class="fh-text-wave">
<span>W</span><span>A</span><span>V</span><span>E</span>
</span>
CSS
.fh-text-wave span {
display: inline-block;
animation: fh-wave 1.4s ease-in-out infinite;
}
.fh-text-wave span:nth-child(2) { animation-delay: 0.1s; }
.fh-text-wave span:nth-child(3) { animation-delay: 0.2s; }
.fh-text-wave span:nth-child(4) { animation-delay: 0.3s; }
.fh-text-wave span:nth-child(5) { animation-delay: 0.4s; }
.fh-text-wave span:nth-child(6) { animation-delay: 0.5s; }
@keyframes fh-wave {
0%, 40%, 100% { transform: translateY(0); }
20% { transform: translateY(-10px); }
}
Glitch
The element needs a data-text attribute matching its content — the pseudo-elements clone it into the offset colour layers.
Markup
<span class="fh-glitch" data-text="GLITCH">GLITCH</span>
CSS
.fh-glitch {
position: relative;
animation: fh-glitchSkew 2.5s infinite;
}
.fh-glitch::before,
.fh-glitch::after {
content: attr(data-text);
position: absolute;
top: 0; left: 0;
width: 100%;
}
.fh-glitch::before {
color: #06b6d4;
clip-path: inset(0 0 55% 0);
animation: fh-glitchTop 2.5s infinite;
}
.fh-glitch::after {
color: #ef4444;
clip-path: inset(45% 0 0 0);
animation: fh-glitchBottom 2.5s infinite;
}
@keyframes fh-glitchSkew {
0%, 90%, 100% { transform: skewX(0); }
92% { transform: skewX(4deg); }
94% { transform: skewX(-4deg); }
96% { transform: skewX(2deg); }
}
@keyframes fh-glitchTop {
0%, 88%, 100% { transform: translate(0); }
90% { transform: translate(-4px, -2px); }
94% { transform: translate(4px, 1px); }
}
@keyframes fh-glitchBottom {
0%, 88%, 100% { transform: translate(0); }
90% { transform: translate(4px, 2px); }
94% { transform: translate(-4px, -1px); }
}
Neon Flicker
Stacked text-shadows build the glow; the flicker comes from brief opacity dips at irregular intervals, like a failing tube.
Markup
<span class="fh-neon">OPEN</span>
CSS
.fh-neon {
color: #f8fafc;
text-shadow:
0 0 6px #06b6d4,
0 0 12px #06b6d4,
0 0 24px #06b6d4,
0 0 48px #0891b2;
animation: fh-neonFlicker 2.4s linear infinite;
}
@keyframes fh-neonFlicker {
0%, 18%, 22%, 26%, 100% { opacity: 1; }
20%, 24% { opacity: 0.45; }
60% { opacity: 0.92; }
}
Tracking In
Letters contract from wide spacing into place — a favourite for cinematic hero titles.
Markup
<h1 class="fh-tracking-in">Your title</h1>
CSS
.fh-tracking-in {
animation: fh-trackingIn 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
@keyframes fh-trackingIn {
from { letter-spacing: 0.6em; opacity: 0; }
to { letter-spacing: normal; opacity: 1; }
}
Focus In
Text sharpens from a blur, like a camera pulling focus. Heavier than transform-based effects — use it on headings, not paragraphs.
Markup
<h2 class="fh-text-focus">Your heading</h2>
CSS
.fh-text-focus {
animation: fh-textFocus 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
@keyframes fh-textFocus {
from { filter: blur(10px); opacity: 0; }
to { filter: blur(0); opacity: 1; }
}
Where text effects belong
Animated text is powerful precisely because it's unusual, which makes restraint the whole skill. One animated headline in a hero section reads as craft; animated text throughout a page reads as a template. These effects belong on headlines, hero statements and single focal words — never on body copy, which people need to actually read.
The gradient-flow and neon effects suit brand moments and landing pages. Typewriter fits terminal aesthetics and developer-facing products. Glitch works for cyberpunk and gaming contexts and looks out of place almost everywhere else.
The techniques behind them
Gradient text works by painting a gradient as the element's background, clipping it to the glyph shapes with background-clip: text, and making the text itself transparent. Animating background-position across an oversized gradient produces the flow.
Typewriter combines two tricks: a steps() timing function animating width so characters appear discretely rather than sliding, and a blinking border-right acting as the caret. Because it depends on character count, the ch width and step count must both match your text.
Letter effects like the wave need each character in its own element with a staggered delay — the one case here where a little JavaScript to split the text is worth it.
Accessibility rules for animated text
Three constraints matter. Text that moves or flashes must be avoidable — WCAG requires a way to pause or stop anything that animates for more than five seconds, which is why looping text effects should be reserved for short headlines and paused under prefers-reduced-motion.
Flashing is a genuine safety issue: nothing should flash more than three times per second, as faster rates can trigger photosensitive seizures. The neon flicker here stays well under that threshold deliberately.
Finally, keep the text as real text. Effects that split characters into spans should preserve the readable string for screen readers, and gradient text needs a fallback colour so it isn't invisible where background-clip is unsupported.