28+ CSS Text Glitch Effects

Curated compilation of 28+ HTML and CSS text glitch effect examples. Each item is sourced from Codepen for web designers and developers and costs nothing.

1. Glitch Effect — week 9/52

See the Pen <a href="https://codepen.io/knyttneve/pen/eXNbKo"> glitch effect — week 9/52</a> by Mert Cukuren (<a href="https://codepen.io/knyttneve">@knyttneve</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mert Cukuren
Source: Code / Demo
Created on: FEBRUARY 28, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript(Babel)

2. Dice Roleplay Glitch & Pulse

See the Pen <a href="https://codepen.io/Atsohga/pen/XgbXEa"> Dice roleplay glitch & pulse</a> by Agathe (<a href="https://codepen.io/Atsohga">@Atsohga</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Agathe
Source: Code / Demo
Created on: JUNE 06, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less)

3. Glitch text with image background

See the Pen <a href="https://codepen.io/marcellegane/pen/GoGVQe"> Glitch text with image background</a> by Marcel Legane (<a href="https://codepen.io/marcellegane">@marcellegane</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Marcel Legane
Source: Code / Demo
Created on: FEBRUARY 1, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

4. 404 Glitch Effect

See the Pen <a href="https://codepen.io/davedehaan/pen/DMPqMj"> 404 Glitch Effect</a> by Dave DeHaan (<a href="https://codepen.io/davedehaan">@davedehaan</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dave DeHaan
Source: Code / Demo
Created on: NOVEMBER 20, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

5. CSS3 Glitch Animation

See the Pen <a href="https://codepen.io/ihatetomatoes/pen/edJdpJ"> CSS3 Glitch Animation</a> by Petr Tichy (<a href="https://codepen.io/ihatetomatoes">@ihatetomatoes</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Petr Tichy
Source: Code / Demo
Created on: SEPTEMBER 13, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

6. Glitch Effect

See the Pen <a href="https://codepen.io/tksiiii/pen/xdQgJX"> Glitch Effect</a> by takashi (<a href="https://codepen.io/tksiiii">@tksiiii</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: takashi
Source: Code / Demo
Created on: MAY 20, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript(Babel)

7. Glitch Hover

See the Pen <a href="https://codepen.io/cubeghost/pen/myWqvL"> glitch hover</a> by alex baldwin (<a href="https://codepen.io/cubeghost">@cubeghost</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: alex baldwin
Source: Code / Demo
Created on: JANUARY 15, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

8. Retro Glitch Effect Colors RGB (Daily Design + Code #6)

See the Pen <a href="https://codepen.io/Juxtopposed/pen/MWPmaww"> Retro Glitch Effect Colors RGB (Daily Design + Code #6)</a> by Juxtopposed (<a href="https://codepen.io/Juxtopposed">@Juxtopposed</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Juxtopposed
Source: Code / Demo
Created on: APRIL 25, 2023
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

9. Image Glitch Effect

See the Pen <a href="https://codepen.io/AlainBarrios/pen/OEOKgm"> Image glitch effect</a> by Alain (<a href="https://codepen.io/AlainBarrios">@AlainBarrios</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alain
Source: Code / Demo
Created on: JUNE 18, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

10. Morphology – Laptop Glitch -Dilate

See the Pen <a href="https://codepen.io/janein/pen/LYZEgyK"> morphology – laptop glitch – dilate</a> by janein (<a href="https://codepen.io/janein">@janein</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: janein
Source: Code / Demo
Created on: OCTOBER 09, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

11. SVG Glitch

See the Pen <a href="https://codepen.io/DirkWeber/pen/YzBYWY"> SVG Glitch</a> by Dirk Weber (<a href="https://codepen.io/DirkWeber">@DirkWeber</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dirk Weber
Source: Code / Demo
Created on: OCTOBER 3, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

12. Animated Logo & Glitch Effect & Retro Look (CSS)

See the Pen <a href="https://codepen.io/konstantindenerz/pen/mdGpxKg"> Animated Logo & Glitch Effect & Retro Look (CSS)</a> by Konstantin Denerz (<a href="https://codepen.io/konstantindenerz">@konstantindenerz</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Konstantin Denerz
Source: Code / Demo
Created on: MARCH 11, 2023
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

13. Glitch Image Effect | CSS Animation

See the Pen <a href="https://codepen.io/MinzCode/pen/YzqwbQV"> Glitch Image Effect | CSS Animation</a> by MinzCode (<a href="https://codepen.io/MinzCode">@MinzCode</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: MinzCode
Source: Code / Demo
Created on: AUGUST 14, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

14. Mix-Blend-Mode Rendering Glitch

See the Pen <a href="https://codepen.io/mattpopovich/pen/MyNyvL"> mix-blend-mode rendering glitch [No longer glitchy]</a> by Matt Popovich (<a href="https://codepen.io/mattpopovich">@mattpopovich</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Matt Popovich
Source: Code / Demo
Created on: MAY 22, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

15. glitch glitch glitch

See the Pen <a href="https://codepen.io/hmongouachon/pen/LZGwWY"> glitch glitch glitch</a> by Hadrien Mongouachon (<a href="https://codepen.io/hmongouachon">@hmongouachon</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Hadrien Mongouachon
Source: Code / Demo
Created on: JUNE 12, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

16. Glitching Text (SCSS)

See the Pen <a href="https://codepen.io/kay_dev/pen/YLdVjw"> Glitching Text (SCSS)</a> by Kay (<a href="https://codepen.io/kay_dev">@kay_dev</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kay
Source: Code / Demo
Created on: MAY 19, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

17. 3D Glitch Text (CSS Only)

See the Pen <a href="https://codepen.io/colinhorn/pen/PGXeqm"> 3D Glitch Text (CSS Only)</a> by Colin Horn (<a href="https://codepen.io/colinhorn">@colinhorn</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Colin Horn
Source: Code / Demo
Created on: OCTOBER 21, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

18. Glitch Pop

See the Pen <a href="https://codepen.io/noahblon/pen/wKvvxX"> Glitch Pop</a> by Noah Blon (<a href="https://codepen.io/noahblon">@noahblon</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Noah Blon
Source: Code / Demo
Created on: AUGUST 30, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

19. CSS Cyber Punk Buttons

See the Pen <a href="https://codepen.io/jh3y/pen/BajVmOg"> CSS CyberPunk Buttons (:hover to glitch 😎)</a> by Jhey (<a href="https://codepen.io/jh3y">@jh3y</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: JHEY
Source: Code / Demo
Created on: JULY 11, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Stylus)

20. Glitch Effect in CSS

See the Pen <a href="https://codepen.io/origine/pen/qaKZPE"> Glitch effect in CSS</a> by Thomas Aufresne (<a href="https://codepen.io/origine">@origine</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Thomas Aufresne
Source: Code / Demo
Created on: OCTOBER 12, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less)

21. Glitch animation with pseudo-element

See the Pen <a href="https://codepen.io/oscar-jite/pen/VwRbdKB"> Glitch animation with pseudo-element</a> by Oscar-Jite (<a href="https://codepen.io/oscar-jite">@oscar-jite</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Oscar-Jite
Source: Code / Demo
Created on: JANUARY 19, 2024
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

22. Text Glitch animation (Clip-path, text-shadow and pseudo-elements)

See the Pen <a href="https://codepen.io/oscar-jite/pen/yLwoeLE"> Text Glitch animation (Clip-path, text-shadow and pseudo-elements)</a> by Oscar-Jite (<a href="https://codepen.io/oscar-jite">@oscar-jite</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Oscar-Jite
Source: Code / Demo
Created on: JANUARY 23, 2024
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

23. VHS Glitch

See the Pen <a href="https://codepen.io/schoenwaldnils/pen/nrbzvq"> VHS Glitch</a> by Nils Schönwald (<a href="https://codepen.io/schoenwaldnils">@schoenwaldnils</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nils Schönwald
Source: Code / Demo
Created on: JANUARY 15, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(Less)

24. Loading Liquid Animation

See the Pen <a href="https://codepen.io/FelixRilling/pen/vNJoMy"> Pure CSS Glitch Effect</a> by Felix Rilling (<a href="https://codepen.io/FelixRilling">@FelixRilling</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Felix Rilling
Source: Code / Demo
Created on: OCTOBER 14, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

25. The Glitcher

See the Pen <a href="https://codepen.io/airnan/pen/gWLvjM"> The Glitcher</a> by kittons (<a href="https://codepen.io/airnan">@airnan</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: kittons
Source: Code / Demo
Created on: APRIL 26, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

26. Glitch Clock

See the Pen <a href="https://codepen.io/fearOfCode/pen/PoMyKQ"> Glitch Clock</a> by FEAR ØF CODE (<a href="https://codepen.io/fearOfCode">@fearOfCode</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: FEAR ØF CODE
Source: Code / Demo
Created on: NOVEMBER 5, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Stylus), JavaScript

27. Glitch Preloader

See the Pen <a href="https://codepen.io/mirai1337/pen/mMegOZ"> Glitch Preloader</a> by Nazar Kubaty (<a href="https://codepen.io/mirai1337">@mirai1337</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nazar Kubaty
Source: Code / Demo
Created on: JULY 29, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

28. Glitch Effect by SVG Filter

See the Pen <a href="https://codepen.io/UMi101618/pen/qBojZwm"> glitch effect by SVG filter</a> by UMi / Web Designer (<a href="https://codepen.io/UMi101618">@UMi101618</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Uchiyama＠株式会社フォスター
Source: Code / Demo
Created on: JULY 22, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

29. 404 – Glitched Out

See the Pen <a href="https://codepen.io/ZonFire99/pen/EaYmGV"> 404 – Glitched out</a> by ZonFire99 (<a href="https://codepen.io/ZonFire99">@ZonFire99</a>) on <a href="https://codepen.io">CodePen</a>. Author: ZonFire99
Source: Code / Demo
Created on: NOVEMBER 08, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS