Glitch Text Hover Effect
A calm word that breaks into jittering slices of color while hovered. Two pseudo-element copies are clipped into bands and stepped between offsets, and the second copy is hue-rotated.
Also known as: glitch effect on hover, rgb split text, cyberpunk text hover.
Offline
HTML
<div class="hfx-text-glitch" data-text="Offline">Offline</div>
CSS
.hfx-text-glitch {
--c: var(--hfx-color, #3b82f6);
font-size: calc(var(--hfx-size, 16px) * 2.5);
font-family: system-ui, sans-serif;
font-weight: 800;
line-height: 1.15;
cursor: default;
position: relative;
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.04em;}
.hfx-text-glitch::before,
.hfx-text-glitch::after {
content: attr(data-text);
position: absolute;
inset: 0;
color: var(--c);
opacity: 0;
pointer-events: none;
}
.hfx-text-glitch::after { filter: hue-rotate(150deg); }
.hfx-text-glitch:hover { animation: hfx-text-glitch-jolt 1.3s steps(1) infinite; }
.hfx-text-glitch:hover::before {
opacity: 1;
animation: hfx-text-glitch-top 0.9s steps(1) infinite;
}
.hfx-text-glitch:hover::after {
opacity: 1;
animation: hfx-text-glitch-bottom 0.7s steps(1) infinite;
}
@keyframes hfx-text-glitch-top {
0%, 100% { clip-path: inset(0 0 70% 0); transform: translate(-0.06em, -0.02em); }
20% { clip-path: inset(18% 0 58% 0); transform: translate(0.05em, 0); }
40% { clip-path: inset(42% 0 40% 0); transform: translate(-0.08em, 0.01em); }
60% { clip-path: inset(6% 0 82% 0); transform: translate(0.04em, 0); }
80% { clip-path: inset(28% 0 52% 0); transform: translate(-0.03em, 0); }
}
@keyframes hfx-text-glitch-bottom {
0%, 100% { clip-path: inset(62% 0 8% 0); transform: translate(0.06em, 0.02em); }
25% { clip-path: inset(80% 0 0 0); transform: translate(-0.05em, 0); }
50% { clip-path: inset(50% 0 32% 0); transform: translate(0.07em, 0); }
75% { clip-path: inset(70% 0 12% 0); transform: translate(-0.04em, 0.01em); }
}
@keyframes hfx-text-glitch-jolt {
0%, 14%, 52%, 100% { transform: none; }
12% { transform: translateX(0.03em) skewX(-6deg); }
50% { transform: translateX(-0.02em); }
}
@media (prefers-reduced-motion: reduce) {
.hfx-text-glitch, .hfx-text-glitch *, .hfx-text-glitch::before, .hfx-text-glitch::after, .hfx-text-glitch *::before, .hfx-text-glitch *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--hfx-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hfx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - 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.