Hello Friends, in this article I have listed 12+ Awesome CSS Glitch Text Effect Examples. Check out these excellent Text Glitch Animation which are available on CodePen.
How to create glitch text animation step by step
Step 1 — Creating a New Project
In this step, we need to create a new project folder and files(index.html, style.css) for creating a glitch effect. In the next step, you will start creating the structure of the webpage.
Step 2 — Setting Up the basic structure
In this step, we will add the HTML code to create the basic structure of the project.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Glitch Text Animation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
</head>
<body>
</body>
</html>This is the base structure of most web pages that use HTML.
Add the following code inside the <body> tag:
<div class="flex-center-row">
<div class="text-4 text">Stackfindover</div>
</div>Step 3 — Adding Styles for the Classes
In this step, we will add styles to the section class Inside style.css file
* {
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
body {
height: 100vh;
background: #000;
}
.flex-center-row {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.text{
font-size:100px;
font-weight: 800;
}
.text-4 {
animation: text-shadow 2.5s linear infinite;
filter: invert(0) blur(5px);
}
@keyframes text-shadow {
0% {
transform: translateY(0);
text-shadow:
0 0 0 #0c2ffb,
0 0 0 #2cfcfd,
0 0 0 #fb203b,
0 0 0 #fefc4b;
}
20% {
transform: translateY(-10px);
text-shadow:
0 0.125px 0 #0c2ffb,
0 0.25px 0 #2cfcfd,
0 -0.125px 0 #fb203b,
0 -0.25px 0 #fefc4b;
}
40% {
transform: translateY(5px);
text-shadow:
0 -0.0625em 0 #0c2ffb,
0 -0.125em 0 #2cfcfd,
0 0.0625em 0 #fb203b,
0 0.125em 0 #fefc4b;
filter: invert(1) blur(0px);
}
60% {
transform: translateY(-0.25px);
text-shadow:
0 0.03125em 0 #0c2ffb,
0 0.0625em 0 #2cfcfd,
0 -0.03125em 0 #fb203b,
0 -0.0625em 0 #fefc4b;
}
80% {
transform: translateY(0);
text-shadow:
0 0 0 #0c2ffb,
0 0 0 #2cfcfd,
0 0 0 #fb203b,
0 0 0 #fefc4b;
}
}#Final Result
Best collection of Glitch Text Effects
In this collection, I have listed over 12+ best Text Glitch Animation Check out these Awesome Animation like: #1Glitch text effect with gsap, #2Simple glitch text, #3Real glitch Text Animation and many more
#1 Glitch text effect with gsap
Glitch text with gsap, which was developed by eighthday. Moreover, you can customize it according to your wish and need.
| Author: | eighthday |
| Created on: | October 19, 2015 |
| Made with: | HTML, CSS and JavaScript |
| Demo Link: | Source Code / Demo |
| Tags: | Glitch text with gsap |
#2 Simple CSS glitch effect
Awesome CSS Glitch effect, which was developed by [SHM]. Moreover, you can customize it according to your wish and need.
| Author: | [SHM] |
| Created on: | April 26, 2017 |
| Made with: | HTML and CSS |
| Demo Link: | Source Code / Demo |
| Tags: | Awesome CSS Glitch effect |
#3 Real glitch Text Animation
Real glitch Text Animation, which was developed by Chase. Moreover, you can customize it according to your wish and need.
| Author: | Chase |
| Created on: | March 12, 2016 |
| Made with: | HTML and CSS |
| Demo Link: | Source Code / Demo |
| Tags: | glitch Text Animation |
You may like this also:
Karva Chauth AI Photo Editing Prompts 2026
Karva Chauth 2026 is here — and AI-generated portraits have completely taken over Instagram and WhatsApp. Couples across India are transforming simple selfies into stunning cinematic festival portraits using Google Gemini or ChatGPT, and you can too. This article gives you 20 ready-to-copy Karva Chauth AI photo editing prompts for Google Gemini or ChatGPT — covering solo…
#4 Awesome Glitch text Animation
Awesome Glitch text Animation, which was developed by Ingvi. Moreover, you can customize it according to your wish and need.
| Author: | Ingvi |
| Created on: | April 7, 2018 |
| Made with: | HTML and CSS |
| Demo Link: | Source Code / Demo |
| Tags: | Awesome Glitch Animation |
#5 Pure CSS Glitch Effect
Pure CSS Glitch Effect, which was developed by EwaSenpai. Moreover, you can customize it according to your wish and need.
| Author: | EwaSenpai |
| Created on: | May 22, 2020 |
| Made with: | HTML and CSS |
| Demo Link: | Source Code / Demo |
| Tags: | Pure CSS Glitch Effect |
#6 Simple text glitch Animation
Simple text glitch Animation, which was developed by Luke Meyrick. Moreover, you can customize it according to your wish and need.
| Author: | Luke Meyrick |
| Created on: | August 29, 2017 |
| Made with: | HTML(Pug) and CSS(SCSS) |
| Demo Link: | Source Code / Demo |
| Tags: | Simple text glitch Animation |
#7 Glitch Screen Animation
Glitch Screen Animation, which was developed by Maria. Moreover, you can customize it according to your wish and need.
| Author: | Maria |
| Created on: | January 10, 2017 |
| Made with: | HTML(Haml), CSS(SCSS) and javaScript |
| Demo Link: | Source Code / Demo |
| Tags: | Glitch Screen Animation |
#8 CSS Smooth glitch Effect
CSS Smooth glitch Effect, which was developed by zoite. Moreover, you can customize it according to your wish and need.
| Author: | zoite |
| Created on: | September 29, 2016 |
| Made with: | HTML(Pug) and CSS(SCSS) |
| Demo Link: | Source Code / Demo |
| Tags: | CSS Smooth glitch Effect |
#9 Glitch Effect 404 page design
Glitch Effect 404 page design, which was developed by dmwhy. Moreover, you can customize it according to your wish and need.
| Author: | dmwhy |
| Created on: | July 29, 2016 |
| Made with: | HTML and CSS |
| Demo Link: | Source Code / Demo |
| Tags: | Glitch Effect 404 page design |
#10 Simple Pixel glitch Text Effect
Simple Pixel glitch Text Effect, which was developed by Christian Petersen. Moreover, you can customize it according to your wish and need.
| Author: | Christian Petersen |
| Created on: | May 6, 2016 |
| Made with: | HTML and CSS(SCSS) |
| Demo Link: | Source Code / Demo |
| Tags: | Pixel glitch Text Effect |
#11 Nice Glitch hover effect
Nice Glitch hover effect, which was developed by Kevin Konrad Henriquez. Moreover, you can customize it according to your wish and need.
| Author: | Kevin Konrad Henriquez |
| Created on: | October 28, 2016 |
| Made with: | HTML and CSS(SCSS) |
| Demo Link: | Source Code / Demo |
| Tags: | Glitch hover effect |
#12 Simple SVG Glitch effect
Simple SVG Glitch effect, which was developed by Dirk Weber. Moreover, you can customize it according to your wish and need.
| Author: | Dirk Weber |
| Created on: | October 3, 2014 |
| Made with: | HTML and CSS(SCSS) |
| Demo Link: | Source Code / Demo |
| Tags: | SVG Glitch effect |
#13 Simple CSS Glitched Text
CSS Glitched Text Animation, which was developed by Alex Pivtorak. Moreover, you can customize it according to your wish and need.
| Author: | Alex Pivtorak |
| Created on: | December 15, 2014 |
| Made with: | HTML, CSS(SASS) and JS |
| Demo Link: | Source Code / Demo |
| Tags: | Glitched Text Animation |
#14 CSS Outline Glitch Text Effect
Outline Glitch Effect, which was developed by Ed Hicks. Moreover, you can customize it according to your wish and need.
| Author: | Ed Hicks |
| Created on: | May 21, 2019 |
| Made with: | HTML and CSS(SCSS) |
| Demo Link: | Source Code / Demo |
| Tags: | Outline Glitch Effect |
We hope you liked this article. You should definitely keep your thoughts about it in the comment below and share this article with your friends.
