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
  6. CSS Typing Text Effects

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: -