Prism Fringe
Glitch & Distortion · Animated · pure CSS
Eight hue-stepped text-shadow layers fan out along one axis from red through violet, with the outermost violet layer travelling furthest — just like real dispersion, where shorter wavelengths bend more. A slow ease-in-out breathe slides the whole spectrum out and back in while the glyph fill stays a crisp, neutral face.
How it works
Prism Fringe is an animated glitch & distortion text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.
Controls
Prism Fringe exposes 3 dedicated controls — Spread, Angle and Shimmer — 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
/* Prism Fringe — made with TEXT-FX · https://text-fx.app
* HTML: just put the class on any element.
* Font: 'Anton', sans-serif (load from Google Fonts).
*/
.text-effect {
font-family: 'Anton', sans-serif;
font-weight: 700;
letter-spacing: -1px;
text-transform: none;
}
.text-effect {
color: hsl(0 0% 93%);
text-shadow:
0.18px 0.1px 0.48px hsl(0 85% 62%),
0.36px 0.2px 0.55px hsl(39 85% 62%),
0.55px 0.3px 0.63px hsl(77 85% 62%),
0.73px 0.4px 0.7px hsl(116 85% 62%),
0.91px 0.5px 0.78px hsl(154 85% 62%),
1.09px 0.61px 0.85px hsl(193 85% 62%),
1.27px 0.71px 0.93px hsl(231 85% 62%),
1.46px 0.81px 1px hsl(270 85% 62%);
animation: text-effect-fringe 3.9s ease-in-out infinite;
}
@keyframes text-effect-fringe {
0%, 100% {
text-shadow:
0.18px 0.1px 0.48px hsl(0 85% 62%),
0.36px 0.2px 0.55px hsl(39 85% 62%),
0.55px 0.3px 0.63px hsl(77 85% 62%),
0.73px 0.4px 0.7px hsl(116 85% 62%),
0.91px 0.5px 0.78px hsl(154 85% 62%),
1.09px 0.61px 0.85px hsl(193 85% 62%),
1.27px 0.71px 0.93px hsl(231 85% 62%),
1.46px 0.81px 1px hsl(270 85% 62%);
}
50% {
text-shadow:
0.4px 0.22px 0.48px hsl(0 85% 62%),
0.81px 0.45px 0.55px hsl(39 85% 62%),
1.21px 0.67px 0.63px hsl(77 85% 62%),
1.62px 0.9px 0.7px hsl(116 85% 62%),
2.02px 1.12px 0.78px hsl(154 85% 62%),
2.43px 1.35px 0.85px hsl(193 85% 62%),
2.83px 1.57px 0.93px hsl(231 85% 62%),
3.24px 1.79px 1px hsl(270 85% 62%);
}
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Glitch & Distortion
- Type
- Animated
- Browser support
- All modern browsers
- Capabilities
- pure