30+ Awesome CSS Text Glitch Effects (Free Code)
Enjoy these incredible HTML and CSS text glitch effect code examples. They are sure to improve your website / project and wow your visitors.
1. Glitch Text
There's some cool glitchy text effects on CodePen, but some have draw backs, like needing black backgrounds, or heavy use of blend modes. This version is two of the better methods merged together, from Justin and Lucas Bebber, with some added stuff from me. Mostly the glow and getting it ...Read More
Author: Chase (chasebank)
Links: Source Code / Demo
Created on: March 11, 2016
Made with: HTML, SCSS
Tags: glitch, distort, text, typography, effect
2. Psycho CSS Glitch Effect Using CSS Variables
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. I have no idea why i called it like that.
Author: Alex Nozdriukhin (alexnoz)
Links: Source Code / Demo
Created on: May 29, 2017
Made with: HTML, SCSS, JS
Tags: custom properties, animation, glitch
3. CSS VHS Text
Author: Maria (Shorina)
Links: Source Code / Demo
Created on: January 10, 2017
Made with: Haml, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
4. Glitching Text SCSS
A simple solution to creating a glitched text solution using only one text tag and some SCSS, using randomized animations. Commented for easy viewing.
Author: Isaac Doud (cipherbeta)
Links: Source Code / Demo
Created on: May 18, 2018
Made with: HTML, SCSS
Tags: glitch, scss, animation, random
5. Simple Text Glitch
Author: Luke Meyrick (lukemeyrick)
Links: Source Code / Demo
Created on: August 29, 2017
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
6. Glitch Effect In LESS
Simple demonstration of how LESS can be used to create the 'Glitch' effect. Inspired by an article on CSS Tricks which uses SASS instead (https://css-tricks.com/glitch-effect-text-images-svg/).
Author: Ana Travas (anatravas)
Links: Source Code / Demo, Css-tricks.com
Created on: November 7, 2016
Made with: Pug, Less
CSS Pre-processor: Less
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: glitch, less, animation, css, effect
7. Glitch Hover Effect CSS
A Glitch hover effect using only css. From https://ihatetomatoes.net/how-to-create-css-glitch-effect/
Author: Kevin Konrad Henriquez (kkhenriquez)
Links: Source Code / Demo, Ihatetomatoes.net
Created on: October 27, 2016
Made with: HTML, SCSS
Tags: css, animation
8. Glitch Text
Author: zoite (gstorbeck)
Links: Source Code / Demo
Created on: September 28, 2016
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
9. Glitch Text Effect
Glitchy Text Effect
Author: Fabio (fabiowallner)
Links: Source Code / Demo
Created on: September 24, 2016
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: animated, glitch
10. Glitchy CSS
Author: Christian Petersen (cbp)
Links: Source Code / Demo
Created on: May 6, 2016
Made with: HTML, SCSS
11. Glitched Text
Author: Alex Pivtorak (alexpivtorak)
Links: Source Code / Demo
Created on: December 15, 2014
Made with: HTML, Sass, JS
12. Glitch Effect In CSS
Glitch effect on hover, as seen on http://www.kikk.be/2016/. Shout out to @Dogstudio for this cool website!
Author: Thomas Aufresne (origine)
Links: Source Code / Demo
Created on: October 12, 2016
Made with: HTML, Less, JS
Tags: css
13. Glitch Effect
Glitch effect made with CSS only...Day 4 of my personal challenge.
Author: Asfo Zavala (asfo)
Links: Source Code / Demo
Created on: October 29, 2015
Made with: HTML, CSS, JS
14. 404 Not Found
Glitch CSS
Author: meshare (meshare)
Links: Source Code / Demo
Created on: June 19, 2020
Made with: HTML, SCSS
Tags: 404, not-found, error-page, glitch
15. Text Glitch Effect
Totally glitchin text effect. Created by animating ::before and ::after pseudo-elements.
Author: marinda (mariiinda)
Links: Source Code / Demo
Created on: May 29, 2020
Made with: HTML, SCSS
Tags: glitch, css-animation, text-effect
16. Glitchy CSS Text
A simple css only glitch effect
Author: Nuro Azhar (noureddinemade)
Links: Source Code / Demo
Made with: HTML, Sass
17. Glitch Effect On Words
Glitchy effect on words using data-text and CSS @keyframes.
Author: AquaCoder (aquacode)
Links: Source Code / Demo
Created on: February 10, 2020
Made with: HTML, CSS
Tags: glitch, keyframes, html, datatext, css
18. CSS Only Glitch Effect
Author: Ahmed Mohaisen (ahmed_mohaisen)
Links: Source Code / Demo
Created on: May 31, 2020
Made with: HTML, CSS
Tags: css, glitch, effect, animation, color
19. Glitched CSS Loading Page
A glitchy loading page that doesn't use Javascript at all.
Author: Delta Sign (DeltaSign)
Links: Source Code / Demo
Created on: December 8, 2019
Made with: HTML, CSS
Tags: glitch, loading, dark mode, pure-css, no-javascript
20. Glitch Text
Change the text with js
Author: GlitchBoy (the_glichboy)
Links: Source Code / Demo
Created on: September 23, 2019
Made with: HTML, CSS, JS
Tags: js, css, html, glitch, effect
21. CSS Hover Glitch
Author: Max (maxbrunel)
Links: Source Code / Demo
Made with: Pug, Stylus
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Pug
22. Glitching Text In CSS
By using clip-path property, we can create distortion and glitch effect with just CSS3 and HTML5
Author: Nirajan Basnet (nirazanbasnet)
Links: Source Code / Demo
Made with: HTML, SCSS
23. PSYCHO-PASS Glitch Animation
Glitch Animation on psycho-pass.com
Author: Michinosuke (Michinosuke)
Links: Source Code / Demo
Created on: November 25, 2019
Made with: Pug, SCSS, TypeScript
CSS Pre-processor: SCSS
JS Pre-processor: TypeScript
HTML Pre-processor: Pug
Tags: glitch, animation
24. CSS Glitchy Text Effect
Author: Ed Hicks (blucube)
Links: Source Code / Demo
Created on: May 21, 2019
Made with: HTML, SCSS
Tags: css, glitch, animation, text
25. 404 Glitch Effect
Glitch effect created for Valtech.com
Author: Martijn de Valk (martijndevalk)
Links: Source Code / Demo
Created on: January 11, 2019
Made with: HTML, SCSS, Babel
Tags: 404, glitch, greensock, valtech
More Awesome Lists:
Share: