Collection of hand-picked free HTML and CSS text glitch effect code examples.

  1. CSS Text Effects
  2. CSS Text Shadow Effects
  3. CSS Glow Text Effects
  4. CSS 3D Text Effects
  5. CSS Text Animations
Demo image: Glitching Text (SCSS) Glitching Text (SCSS) - GIF Demo

Creator

  • Isaac Doud

Programming language

  • HTML / CSS (SCSS)

Information the code

Glitching Text (SCSS)

A simple solution to creating a glitched text solution using only one text tag and some SCSS, using randomized animations.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Simple Text Glitch Simple Text Glitch - GIF Demo

Creator

  • Luke Meyrick

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

Simple Text Glitch

Simple text glitch effect in HTML and CSS.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Demo image: Psycho Glitch with CSS variables keyframes

Creator

  • Alex Nozdriukhin

Programming language

  • HTML / CSS (SCSS)

Information the code

Psycho Glitch with CSS variables & @keyframes

The “glitch” effect, recreated with animated CSS custom properties. Pure CSS. It doesn’t work in Firefox for now, but will work in the next version.

Browser Support: Chrome, Opera, Safari

Dependencies:

Demo image: VHS Text VHS Text - GIF Demo

Creator

  • Maria

Programming language

  • HTML (Haml) / CSS (SCSS) / JavaScript

Information the code

VHS Text

VHS text effect in HTML, CSS and JS.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Glitch Effect in LESS Glitch Effect in LESS - GIF Demo

Creator

  • Ana Travas

Programming language

  • HTML (Pug) / CSS (Less)

Information the code

Glitch Effect in LESS

Simple demonstration of how LESS can be used to create the “glitch” effect.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Glitch Hover Effect CSS Glitch Hover Effect CSS - GIF Demo

Creator

  • Kevin Konrad Henriquez

Programming language

  • HTML / CSS (SCSS)

Information the code

Glitch Hover Effect CSS

A glitch hover effect using only CSS.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Glitch Text

Creator

  • gstorbeck

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

Glitch Text

Simple glitch text effect in pure CSS.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: CSS Glitchy Text CSS Glitchy Text - GIF Demo

Creator

  • Matt Stvartak

Programming language

  • HTML / CSS (SCSS)

Information the code

CSS Glitchy Text

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Glitch Text Glitch Text - GIF Demo

Creator

  • Fabio

Programming language

  • HTML (Pug) / CSS (Sass)

Information the code

Glitch Text

Glitchy text effect.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: CSS Glitch CSS Glitch - GIF Demo

Creator

  • Christian Petersen

Programming language

  • HTML / CSS (SCSS)

Information the code

CSS Glitch

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: CSS Glitch Text

Creator

  • Chase

Programming language

  • HTML / CSS (SCSS)

Information the code

CSS Glitch Text

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Glitched Text

Creator

  • Alex Pivtorak

Programming language

  • HTML / CSS (Sass) / JavaScript

Information the code

Glitched Text

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: