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

Author: kiera-bot
Views Total: 848 views
Official Page: Go to website
Last Update: December 3, 2020
License: MIT


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

See also  404 text glitch effect using HTML and CSS

Leave a Reply

Your email address will not be published. Required fields are marked *