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

Category: Animation , CSS & CSS3 , Text | December 3, 2020
Views Total:1,397 views
Official Page:Go to website
Last Update:December 3, 2020


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


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!">

You Might Be Interested In:

Leave a Reply