27+ CSS Glitch Effects

In this collection, we are showcasing free 27+ HTML and CSS glitch effect code examples that we’ve gathered from authentic platforms like CodePen and GitHub.

1. CSS Glitch Effect

See the Pen <a href="https://codepen.io/nirazanbasnet/pen/RzOwdg"> CSS Glitch Effect</a> by Nirajan Basnet (<a href="https://codepen.io/nirazanbasnet">@nirazanbasnet</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nirajan Basnet
Source: Code / Demo
Created on: JULY 12, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

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

3. 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)

4. 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)

5. 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)

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

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

8. 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)

9. 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)

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. Clean CSS Glitch

See the Pen <a href="https://codepen.io/pgalor/pen/OeRWJQ"> Clean CSS Glitch</a> by Piotr Galor (<a href="https://codepen.io/pgalor">@pgalor</a>) on <a href="https://codepen.io">CodePen</a>.

Author: Piotr Galor
Source: Code / Demo
Created on: JUNE 18, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

12. 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)

13. Glitch Effect

See the Pen <a href="https://codepen.io/rauldronca/pen/zKOaXZ"> Glitch Effect</a> by Dronca Raul (<a href="https://codepen.io/rauldronca">@rauldronca</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dronca Raul
Source: Code / Demo
Created on: AUGUST 31, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

14. 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)

15. CSS Glitch Effect

See the Pen <a href="https://codepen.io/mburakerman/pen/MpKjjj"> Css Glitch Effect</a> by Mehmet Burak Erman (<a href="https://codepen.io/mburakerman">@mburakerman</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mehmet Burak Erman
Source: Code / Demo
Created on: MARCH 1, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

16. 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: (Pug), CSS(Stylus)

17. Psycho Glitch (CSS variables & @keyframes)

See the Pen <a href="https://codepen.io/alexnoz/pen/PmvMZm"> Psycho Glitch (CSS variables & @keyframes)</a> by Alex Nozdriukhin (<a href="https://codepen.io/alexnoz">@alexnoz</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alex Nozdriukhin
Source: Code / Demo
Created on: MAY 29, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

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

19. 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)

20. 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)

21. 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)

22. 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: FEBRUARY 28, 2028
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

23. 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: NOVEMBER 5, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Stylus), JavaScript

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

25. 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)

26. 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)

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