In this tutorial, you will learn how to apply a glitch effect to a text with CSS. Transform translate and skew are applied to the before and after pseudo elements to achieve the effect. Watch the video below for a detailed tutorial.
<body>
<div class="container">
<h1>Error</h1>
</div>
</body>body {
background: #2e3537;
font-family: 'Roboto', sans-serif;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
color: white;
font-size: 6em;
}
.container h1 {
animation: glitch 1s linear infinite;
}
@keyframes glitch {
0%, 65% {
transform: translate(2px, 0) skew(0deg);
}
5%, 60% {
transform: translate(-2px, 0) skew(0deg);
}
64% {
transform: translate(0, 0) skew(5deg);
}
}
.container h1:before, .container h1:after {
content: 'Error';
position: absolute;
z-index: -1;
left: 0;
color: gray;
}
.container h1:before {
animation: glitch-top 1s linear infinite;
clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}
@keyframes glitch-top {
0%, 65% {
transform: translate(2px, -2px);
}
5%, 60% {
transform: translate(-2px, 2px);
}
64% {
transform: translate(13px, -1px) skew(-13deg);
}
}
.container h1:after {
animation: glitch-bottom 1s linear infinite;
clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
-webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}
@keyframes glitch-bottom {
0%, 65% {
transform: translate(-2px, 0);
}
5%, 60% {
transform: translate(-2px, 0);
}
64% {
transform: translate(-22px, 5px) skew(21deg);
}
}