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:
How to Remove ‘Process Your Orders on the Go’ from WooCommerce Emails: A Quick Guide
Learn how to disable the “Process your orders on the go” mobile messaging feature in your WooCommerce order emails using a simple code snippet. Customize … Read More
#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.
