GlitchText is a stylesheet that provides the user with a class titled glitch-text that makes any sort of inline text in that class exhibit a glitching effect. Please take note of general accessibility and people with hard of sight (or fatigued eyes), don't put this effect on an entire paragraph.
Installation
Example
Glitch
Configuration
Glitch effect offset
You can use the CSS variables --glitch-text-offset and --glitch-text-offset--neg to control the position of the glitch background:
<span style="--glitch-text-offset: 3px; --glitch-text-offset--neg: -3px">I have a 3px deviation from the base text.</span>
<span style="--glitch-text-offset: 9px; --glitch-text-offset--neg: -9px">I am a rave's lighting system.</span>
<span style="--glitch-text-offset: 18px; --glitch-text-offset--neg: -18px">I give people seizures.</span>
Glitch effect colour
You can use the CSS variables --glitch-text-color-1 and --glitch-text-color-2 to control the colours of the glitch effect:
<span style="--glitch-text-color-1: yellow; --glitch-text-color-2: red">I have a yellow and red glitch effect.</span>
<span style="--glitch-text-color-1: blue; --glitch-text-color-2: orange">I have an orange and blue glitch effect, reminds me of Portal.</span>
<span style="--glitch-text-color-2: purple">I only override the second glitch effect by turning it purple.</span>
Text above can be found here (edit)