Glitch Effect Animation Using Pure CSS

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)

Table of Contents

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 CSSOutput

Pure CSS Glitch Animation | Best Glitch Effect Ever - Codewithrandom

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 youWritten by – Code With Random/AnkiCode 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!

Glitch Effect Animation Using Pure CSS