Telegram Group Join Now
Glitch Effect Animation Using Pure CSS
.png "Pure CSS Glitch Animation | Best Glitch Effect Ever - Codewithrandom")
Welcome to the Codewithrandom blog. In this blog, we learn how to create Glitch Effect Animation Using Pure CSS. this is the best Glitch Effect animation you see ever using only Html and Css.
I hope you enjoy our blog so let’s start with a basic html structure for Glitch Effect.
100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)
Live Preview Of Glitch Effect Animation
| Code by | Tee |
| Project Download | Link Available Below |
| Language used | HTML and CSS |
| External link / Dependencies | NO |
| Responsive | YES |
HTML Code For Glitch Effect Animation
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Glitch</title>
<link
href="https://fonts.googleapis.com/css?family=Oswald"
rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="glitch" data-text="Codewithrandom">Codewithrandom</div>
<div class="glow">Codewithrandom</div>
<p class="subtitle">Frontend Developer | Anki</p>
</div>
<div class="scanlines"></div>
</body>
</html>
There is all the html code for the Glitch effect. Now, you can see output without Css, then we write Css for the Glitch Animation.
Restaurant Website Using HTML and CSS
Output
CSS Code For Glitch Effect Animation
body {
background: black;
font-family: "Oswald", sans-serif;
font-style: italic;
}
.container {
position: absolute;
transform: translate(-50%, -50%);
top: 40%;
left: 50%;
}
.glitch, .glow {
color: #dfbfbf;
position: relative;
font-size: 9vw;
animation: glitch 5s 5s infinite;
}
.glitch::before, .glow::before {
content: attr(data-text);
position: absolute;
left: -2px;
text-shadow: -5px 0 magenta;
background: black;
overflow: hidden;
top: 0;
animation: noise-1 3s linear infinite alternate-reverse, glitch 5s 5.05s infinite;
}
.glitch::after, .glow::after {
content: attr(data-text);
position: absolute;
left: 2px;
text-shadow: -5px 0 lightgreen;
background: black;
overflow: hidden;
top: 0;
animation: noise-2 3s linear infinite alternate-reverse, glitch 5s 5s infinite;
}
@keyframes glitch {
1% {
transform: rotateX(10deg) skewX(90deg);
}
2% {
transform: rotateX(0deg) skewX(0deg);
}
}
@keyframes noise-1 {
3.3333333333% {
clip-path: inset(11px 0 5px 0);
}
6.6666666667% {
clip-path: inset(88px 0 5px 0);
}
10% {
clip-path: inset(76px 0 6px 0);
}
13.3333333333% {
clip-path: inset(42px 0 31px 0);
}
16.6666666667% {
clip-path: inset(77px 0 19px 0);
}
20% {
clip-path: inset(8px 0 27px 0);
}
23.3333333333% {
clip-path: inset(51px 0 28px 0);
}
26.6666666667% {
clip-path: inset(53px 0 41px 0);
}
30% {
clip-path: inset(93px 0 4px 0);
}
33.3333333333% {
clip-path: inset(51px 0 43px 0);
}
36.6666666667% {
clip-path: inset(5px 0 55px 0);
}
40% {
clip-path: inset(93px 0 5px 0);
}
43.3333333333% {
clip-path: inset(83px 0 9px 0);
}
46.6666666667% {
clip-path: inset(59px 0 14px 0);
}
50% {
clip-path: inset(32px 0 65px 0);
}
53.3333333333% {
clip-path: inset(41px 0 8px 0);
}
56.6666666667% {
clip-path: inset(76px 0 18px 0);
}
60% {
clip-path: inset(22px 0 15px 0);
}
63.3333333333% {
clip-path: inset(7px 0 87px 0);
}
66.6666666667% {
clip-path: inset(24px 0 61px 0);
}
70% {
clip-path: inset(7px 0 67px 0);
}
73.3333333333% {
clip-path: inset(75px 0 22px 0);
}
76.6666666667% {
clip-path: inset(87px 0 8px 0);
}
80% {
clip-path: inset(57px 0 17px 0);
}
83.3333333333% {
clip-path: inset(32px 0 66px 0);
}
86.6666666667% {
clip-path: inset(96px 0 3px 0);
}
90% {
clip-path: inset(24px 0 54px 0);
}
93.3333333333% {
clip-path: inset(97px 0 3px 0);
}
96.6666666667% {
clip-path: inset(45px 0 28px 0);
}
100% {
clip-path: inset(49px 0 2px 0);
}
}
@keyframes noise-2 {
0% {
clip-path: inset(81px 0 7px 0);
}
3.3333333333% {
clip-path: inset(74px 0 22px 0);
}
6.6666666667% {
clip-path: inset(37px 0 48px 0);
}
10% {
clip-path: inset(46px 0 32px 0);
}
13.3333333333% {
clip-path: inset(84px 0 9px 0);
}
16.6666666667% {
clip-path: inset(50px 0 51px 0);
}
20% {
clip-path: inset(82px 0 10px 0);
}
23.3333333333% {
clip-path: inset(4px 0 51px 0);
}
26.6666666667% {
clip-path: inset(8px 0 84px 0);
}
30% {
clip-path: inset(45px 0 53px 0);
}
33.3333333333% {
clip-path: inset(35px 0 22px 0);
}
36.6666666667% {
clip-path: inset(11px 0 81px 0);
}
40% {
clip-path: inset(5px 0 42px 0);
}
43.3333333333% {
clip-path: inset(46px 0 44px 0);
}
46.6666666667% {
clip-path: inset(41px 0 9px 0);
}
50% {
clip-path: inset(65px 0 17px 0);
}
53.3333333333% {
clip-path: inset(33px 0 61px 0);
}
56.6666666667% {
clip-path: inset(74px 0 9px 0);
}
60% {
clip-path: inset(77px 0 10px 0);
}
63.3333333333% {
clip-path: inset(16px 0 62px 0);
}
66.6666666667% {
clip-path: inset(22px 0 16px 0);
}
70% {
clip-path: inset(8px 0 5px 0);
}
73.3333333333% {
clip-path: inset(89px 0 4px 0);
}
76.6666666667% {
clip-path: inset(67px 0 25px 0);
}
80% {
clip-path: inset(21px 0 6px 0);
}
83.3333333333% {
clip-path: inset(86px 0 2px 0);
}
86.6666666667% {
clip-path: inset(48px 0 49px 0);
}
90% {
clip-path: inset(59px 0 18px 0);
}
93.3333333333% {
clip-path: inset(56px 0 10px 0);
}
96.6666666667% {
clip-path: inset(91px 0 9px 0);
}
100% {
clip-path: inset(3px 0 46px 0);
}
}
.scanlines {
overflow: hidden;
mix-blend-mode: difference;
}
.scanlines::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: repeating-linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.05) 0.5%, transparent 1%);
animation: fudge 7s ease-in-out alternate infinite;
}
@keyframes fudge {
from {
transform: translate(0px, 0px);
}
to {
transform: translate(0px, 2%);
}
}
.glow {
text-shadow: 0 0 1000px #dfbfbf;
color: transparent;
position: absolute;
top: 0;
}
.subtitle {
font-family: Arial, Helvetica, sans-serif;
font-weight: 100;
font-size: 0.8vw;
color: rgba(165, 141, 141, 0.4);
text-transform: uppercase;
letter-spacing: 1em;
text-align: center;
position: absolute;
left: 17%;
animation: glitch-2 5s 5.02s infinite;
}
@keyframes glitch-2 {
1% {
transform: rotateX(10deg) skewX(70deg);
}
2% {
transform: rotateX(0deg) skewX(0deg);
}
}
We have completed our Css Code for Glitch Effect Animation.
Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)
Final Output Of Glitch Effect Using Css
Hope you like the Glitch Effect Animation, you can see the output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you
Written by – Code With Random/Anki
Code by – Tee
Which code editor do you use for this Indian Flag coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
is this project responsive or not?
Yes! this project is a responsive project.
Do you use any external links to create this project?
No!
