Text Glitch (Distortion) Animation On Hover – Glitch.css

Preview:

Description:

Glitch.css is a pure CSS solution to create an animated glitch (distortion) effect on text when hovering.

Based on CSS mix-blend-mode, animation, and keyframes properties.

How to use it:

1. Download the package and import the stylesheet ‘Glitch.css’ into the document.

<link rel="stylesheet" href="glitch.css" />

2. Add the glitch to the text wrapper and determine the glitching text in the data-text attribute. That’s it.

<h1 class="glitch" data-text="Hover over this!">
  CSSScript.com
</h1>