Echo Trail
Interactive & Advanced · Animated · pure CSS
Hue-shifted fading clones trail behind the drifting word for a clean motion after-image. An echo trail, not a chromatic glitch.
How it works
Echo Trail is an animated interactive & advanced text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.
Controls
Echo Trail exposes 4 dedicated controls — Hue, Echoes, Hue Spread and Speed — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.
CSS
/* Echo Trail — made with TEXT-FX · https://text-fx.app
* HTML: just put the class on any element.
* Font: 'Space Mono', monospace (load from Google Fonts).
*/
.text-effect {
font-family: 'Space Mono', monospace;
font-weight: 400;
letter-spacing: 0px;
text-transform: none;
}
.text-effect {
color: hsl(48 90% 70%);
text-shadow: -7px 0 0 hsl(69 85% 62% / 0.53), -14px 0 0 hsl(90 85% 62% / 0.45), -21px 0 0 hsl(111 85% 62% / 0.38), -28px 0 0 hsl(132 85% 62% / 0.3), -35px 0 0 hsl(153 85% 62% / 0.22), -42px 0 0 hsl(174 85% 62% / 0.15), -49px 0 0 hsl(195 85% 62% / 0.07);
animation: text-effect-drift 4.9s ease-in-out infinite alternate;
}
@keyframes text-effect-drift {
from { transform: translateX(-34px); }
to { transform: translateX(34px); }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Interactive & Advanced
- Type
- Animated
- Browser support
- All modern browsers
- Capabilities
- pure