Collection of hand-picked free HTML and CSS text glitch effect code examples from codepen and other resources. Update of December 2018 collection. 8 new items.

Related Articles

  1. CSS Text Effects
  2. CSS Text Shadow Effects
  3. CSS Glow Text Effects
  4. CSS 3D Text Effects
  5. CSS Text Animations

Author

  • Aldriê

Made with

  • HTML / CSS

About a code

Stack Glitch Effect CSS Only

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Monica Ghita

Made with

  • HTML / CSS (SCSS)

About a code

Hover Text Distortion Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • shawn

Made with

  • HTML / CSS (SCSS)

About a code

Glitch Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Matt Gross

Made with

  • HTML / CSS

About a code

Cyberpunk-Style Glitch Walkthrough

Pure-CSS glitch effect explained. An outline of the VFX, layers, and animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Christine Banlawi

Made with

  • HTML / CSS

About a code

Glitch Text

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Yusuke Nakaya

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Only CSS: Glitch Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Tee Diang

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Glitch Experiment

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Piotr Galor

Made with

  • HTML / CSS

About a code

Clean CSS Glitch

Lightweight text glitch effect, animating nothing but transform property.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Glitching Text (SCSS) Glitching Text (SCSS) - GIF Demo

Author

  • Isaac Doud

Made with

  • HTML / CSS (SCSS)

About 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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

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

Author

  • Luke Meyrick

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Simple Text Glitch

Simple text glitch effect in HTML and CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Psycho Glitch with CSS variables keyframes

Author

  • Alex Nozdriukhin

Made with

  • HTML / CSS (SCSS)

About 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.

Compatible browsers: Chrome, Opera, Safari

Dependencies: -

Demo image: VHS Text VHS Text - GIF Demo

Author

  • Maria

Made with

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

About the code

VHS Text

VHS text effect in HTML, CSS and JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

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

Author

  • Ana Travas

Made with

  • HTML (Pug) / CSS (Less)

About the code

Glitch Effect in LESS

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

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

Author

  • Kevin Konrad Henriquez

Made with

  • HTML / CSS (SCSS)

About the code

Glitch Hover Effect CSS

A glitch hover effect using only CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Glitch Text

Author

  • gstorbeck

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Glitch Text

Simple glitch text effect in pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Glitch Text Glitch Text - GIF Demo

Author

  • Fabio

Made with

  • HTML (Pug) / CSS (Sass)

About the code

Glitch Text

Glitchy text effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS Glitch CSS Glitch - GIF Demo

Author

  • Christian Petersen

Made with

  • HTML / CSS (SCSS)

About the code

CSS Glitch

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS Glitch Text

Author

  • Chase

Made with

  • HTML / CSS (SCSS)

About the code

CSS Glitch Text

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Glitched Text

Author

  • Alex Pivtorak

Made with

  • HTML / CSS (Sass) / JavaScript

About the code

Glitched Text

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -