← All elements
<h2 class="gl" data-t="GLITCH">GLITCH</h2>About this animation
A glitchy headline made from two clipped copies of the text, shifted and recoloured by a jumpy keyframe animation.
How it works
The headline is repeated twice with ::before and ::after, which copy the text from the data-t attribute. One copy is cyan and clipped to the top half, the other is red and clipped to the bottom half using clip-path inset. Each jumps sideways in steps, so the two halves slip apart like a damaged video signal.
Ways to customise it
- Change the text in both the element and its data-t attribute.
- Edit the cyan and red colours.
- Change the translate distances in g1 and g2.
Good to know
Flashing content can bother some people, so it is disabled for reduced motion. The extra copies come from CSS, so screen readers read the word once.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.