CSS Glitch Effect

SaravananVijayamuthu

Published in

Web Engineering

3 min readJun 2, 2020

Today, let’s see how to make a text glitch using the CSS

HTML

<!doctype html>
<html>
<head>
<meta charset=”utf-8" />
<meta name=”author” content=”Web Engineering” />
<title>CSS Glitch Effect</title>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>
<body>
<div title=”Comment what You want to learn next “>
Comment what You want to learn next
</div>
</body>
</html>

Make sure both the title and the material within the div is the same. If both are different, they can override each other.

I’ve linked css as an external css, so you can have an internal css that depends on you.

You can use the div tag within the body tag where you need to add the glitch.

Since the key component is CSS, the CSS section is going to be long.

CSS

Body that covers the overall style of the HTML document.

body
{
display: flex;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
margin: 0;
background: #131313;
color: #fff;
font-size: 96px;
font-family: sans-serif;
letter-spacing: -7px;
}

Now let’s see the div look

div
{
animation: glitch 1s linear infinite;
}
@keyframes glitch
{
2%,64%
{
transform: translate(2px,0) skew(0deg);
}
4%,60%
{
transform: translate(-2px,0) skew(0deg);
}
62%
{
transform: translate(0px,0px) skew(5deg);
}
}
div:before,div:after
{
content: attr(title);
position: absolute;
left: 0;
}
div:before
{
animation: glitchtop 1s linear infinite;
clip-path:polygon(0 0,100% 0,100% 33%,0 33%);
}
@keyframes glitchtop
{
2%,64%
{
transform: translate(2px,-2px);
}
4%,60%
{
transform: translate(-2px,2px);
}
62%
{
transform: translate(13px,-1px) skew(-13deg);
}
}
div:after
{
animation: glitchbottom 1.5s linear infinite;
clip-path: polygon(0 67%,100% 67%,100% 100%,0 100%);
}
@keyframes glitchbottom
{
2%,64%
{
transform: translate(-2px,0);
}
4%,60%
{
transform: translate(-2px,0);
}
62%
{
transform: translate(-22px,5px) skew(21deg);
}
}

Since we use the animation property, it has to be defined with the keyframes.

Each @keyframe at-rule determines what will happen at different times during the animation. For example, 0 percent is the beginning of the animation and 100 percent is the end of the animation.