Glitch Hover
Three CSS @keyframes on hover: glitchBase shakes the element, glitchRed and glitchCyan shift red and cyan copies using horizontal clip-path bands — RGB chromatic aberration with no JavaScript.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Hover has 48 effects, including 5 free. Explore the category →
3 usage examples
How it works
The .fx-0354-root root centers a .hover-box.hover-glitch block on a #0a0a0f background. The element carries a data-glitch-label attribute whose value is reused in content: attr(data-glitch-label) on the ::before (red) and ::after (cyan) pseudo-elements. These pseudo-elements are overlaid at 50% of the element via transform: translate(-50%, -50%) and have opacity: 0 at rest.
On hover (or focus), four animations start simultaneously: fx0354-glitchBase shakes the element by ±2 px in XY; fx0354-glitchRed moves the red copy while clipping it into variable horizontal bands with clip-path: inset(X% 0 Y%); fx0354-glitchCyan does the same in an offset pattern for the cyan copy; fx0354-glitchText slightly shifts the span. The effect creates visible RGB chromatic aberration in the shifting red and cyan bands.
Animation names are prefixed fx0354- to prevent collisions. Measured in Chromium 151: effect visible, two copies on a page — only the hovered one animates. Photosensitivity risk: the animation combines rapid motion and color flashing; under prefers-reduced-motion: reduce, all animations are disabled.
Accessibility
- Reduced motion and photosensitivity: under
prefers-reduced-motion: reduce, all animations (glitchBase, glitchRed, glitchCyan, glitchText) are disabled and the red and cyan copies stay invisible. No flashing or rapid motion under reduced motion. Photosensitive users should enable this system setting. - Keyboard: the element is a natively focusable
<button>. The:focus-visiblerule triggers the same Glitch animations as hover; an indigo outline marks the focus state. - Content: the text stays readable via the
span(z-index 1) even during the animation. The red and cyan copies do not alter how screen readers read the text. - Touch: the first touch triggers the animation; it stops on the next touch. On touch screens, exposure to the animation may last longer — the photosensitivity note applies.
Browser compatibility
Pure CSS (@keyframes, clip-path: inset(), animation, :focus-visible, prefers-reduced-motion), no JavaScript. Measured in Chromium 151: full effect, two independent copies. clip-path: inset() available from Chrome 55, Firefox 54, Safari 10.
Without clip-path (very old browsers), the red and cyan copies display whole without banding — the glitch is less readable but not broken. Without animation, the element stays static.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0354-root">
<button class="hover-box hover-glitch" type="button" data-glitch-label="…">
<span>…</span>
</button>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
RGB copy text (HTML — data-glitch-label) |
The visible text in the span |
The value of data-glitch-label is used by the ::before and ::after pseudo-elements via content: attr(data-glitch-label). Changing the value changes the text in the chromatic copies. |
Aberration colors (CSS — color of ::before and ::after) |
Red (red) and cyan (#0ff) |
Replace with #f97316 and #22d3ee for orange-cyan, or #a855f7 and #22c55e for violet-green. |
Shift amplitude (CSS — the -52% and -48% in the keyframes) |
2% offset | Increasing to 4–5% makes the effect more pronounced; reducing to 1% makes it subtle. The sign of the values determines the shift direction. |
Animation speed (CSS — animation: .3s ease 0s infinite) |
300 ms per cycle | .5s makes the glitch slower and less aggressive; .1s makes it very jittery. steps(1) as the easing creates a more jerky glitch. |
Element background (CSS — background of .hover-glitch) |
var(--bg-card) (dark) |
A textured or gradient background makes the glitch harder to read but more organic. On a light background, replace the RGB copy colors with darker tones. |
FAQ
prefers-reduced-motion: reduce, all animations are disabled in the provided code. It is recommended to warn users in the interface if this effect is central to the page.data-glitch-label attribute is copied into the CSS pseudo-elements. If the span text changes dynamically, also update the attribute: el.setAttribute('data-glitch-label', newText).::before and ::after as overlaid layers with background-image, then apply clip-path and mix-blend-mode: color for the chromatic aberration.
