Mastering the Cyberpunk Glitch Effect: A Pure CSS Tutorial (Line-by-Line Breakdown)
Have you ever looked at the UI of Cyberpunk 2077 or classic sci-fi movies and admired those glitchy, glowing neon signs?
It creates a “High Tech, Low Life” vibe that is incredibly popular right now for gaming sites, developer portfolios, and creative landing pages.
Today, we are going to build that exact effect.
The best part? We are doing it with Pure CSS. No JavaScript libraries, no heavy images. Just clean code.
Let’s break down the logic behind the “Glitch.”
1. The HTML Structure (The Skeleton)
We start with a simple anchor tag. However, there is one specific attribute you need to pay attention to: data-text.
<a href="https://ahmodmusa.com" target="_blank" class="cyber-link" data-text="ahmodmusa.com"> ahmodmusa.com </a>
Why data-text? To create a glitch effect, we need two layers of the same text: the “Real” layer and the “Glitch” layer. Instead of writing the text twice in HTML (which is bad for SEO), we use data-text. CSS will grab this value later to create the ghost layer automatically.
2. The Base Styling (The Neon Look)
First, let’s give the button that futuristic Cyan glow. We use a combination of box-shadow and text-shadow.
.cyber-link {
position: relative; /* Parent for absolute pseudo-elements */
text-decoration: none;
font-size: 24px;
color: #00f7ff; /* The classic Cyberpunk Cyan */
border: 2px solid #00f7ff;
padding: 20px 40px;
text-transform: uppercase;
letter-spacing: 4px; /* Wide spacing looks more cinematic */
font-weight: bold;
overflow: hidden; /* Hides anything outside the border */
transition: 0.2s;
/* The Neon Glow Magic */
text-shadow: 0 0 5px #00f7ff;
box-shadow: 0 0 10px #00f7ff, inset 0 0 5px #00f7ff;
}
Key Takeaway: The inset property in box-shadow makes the glow appear inside the button as well, giving it a glass-tube neon feel.
3. The Scanline Texture (Retro TV Vibe)
Old monitors have scanlines. We can simulate this texture using the ::before pseudo-element and a CSS gradient.
.cyber-link::before {
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
/* Creating the stripes */
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 247, 255, 0.1) 3px,
rgba(0, 247, 255, 0.1) 4px
);
z-index: -1; /* Place it behind the text */
pointer-events: none; /* Ignore mouse clicks */
}
This creates subtle, transparent stripes across the button, adding depth and texture to the flat color.
4. The Glitch Layer (Where the Magic Happens)
Now for the complex part. We use ::after to create a copy of the text using content: attr(data-text). We color it Magenta (Pink) to contrast with the Cyan.
.cyber-link::after {
content: attr(data-text); /* Grabs text from HTML */
position: absolute;
top: 0;
left: -2px; /* Offset it slightly to the left */
width: 100%; height: 100%;
padding: 20px 40px;
background: #050505;
color: #ff00ea; /* Glitch Color (Magenta) */
border: 2px solid #ff00ea;
z-index: -2;
opacity: 0; /* Hidden by default */
/* Slicing the text */
clip-path: polygon(0 20%, 100% 20%, 100% 50%, 0 50%);
}
What is clip-path? Imagine taking a pair of scissors and cutting a strip out of the text. That is what clip-path does here. It only shows a specific slice of the pink text.
5. Hover & Animation (Action!)
When the user hovers over the link, we want three things to happen:
- The background fills up.
- The “Glitch Layer” becomes visible.
- The Glitch Layer starts shaking/jerking randomly.
/* Invert colors on hover */
.cyber-link:hover {
background: #00f7ff;
color: #050505;
box-shadow: 0 0 30px #00f7ff; /* Super bright glow */
text-shadow: none;
}
/* Reveal and animate the glitch */
.cyber-link:hover::after {
opacity: 1;
left: 4px;
animation: glitch-jerk 0.3s linear infinite alternate;
}
The Keyframes: This animation rapidly changes the clip-path (the slice position) and moves the text left and right (transform: translate).
@keyframes glitch-jerk {
0% {
clip-path: polygon(0 20%, 100% 20%, 100% 50%, 0 50%);
transform: translate(0);
}
50% {
clip-path: polygon(0 30%, 100% 30%, 100% 60%, 0 60%);
transform: translate(-2px); /* Jerk Left */
}
100% {
clip-path: polygon(0 10%, 100% 10%, 100% 40%, 0 40%);
transform: translate(2px); /* Jerk Right */
}
}
🚀 The Complete Code (Copy & Paste)
Here is the full file. You can save this as an .html file and open it in your browser to see the result.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cyberpunk Glitch Effect</title>
<style>
/* Base Layout */
body {
margin: 0; height: 100vh;
display: flex; justify-content: center; align-items: center;
background-color: #050505;
font-family: 'Courier New', monospace;
}
/* 1. Main Link Style */
.cyber-link {
position: relative;
text-decoration: none;
font-size: 24px;
color: #00f7ff;
border: 2px solid #00f7ff;
padding: 20px 40px;
text-transform: uppercase;
letter-spacing: 4px;
font-weight: bold;
overflow: hidden;
transition: 0.2s;
text-shadow: 0 0 5px #00f7ff;
box-shadow: 0 0 10px #00f7ff, inset 0 0 5px #00f7ff;
z-index: 1;
}
/* 2. Scanline Texture */
.cyber-link::before {
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: repeating-linear-gradient(
0deg, transparent, transparent 2px,
rgba(0, 247, 255, 0.1) 3px, rgba(0, 247, 255, 0.1) 4px
);
z-index: -1; pointer-events: none;
}
/* 3. The Glitch Layer (Pink) */
.cyber-link::after {
content: attr(data-text);
position: absolute;
top: 0; left: -2px; width: 100%; height: 100%;
padding: 20px 40px;
background: #050505;
color: #ff00ea;
border: 2px solid #ff00ea;
z-index: -2; opacity: 0;
transition: 0.1s;
clip-path: polygon(0 20%, 100% 20%, 100% 50%, 0 50%);
}
/* 4. Hover States */
.cyber-link:hover {
background: #00f7ff; color: #050505;
box-shadow: 0 0 30px #00f7ff; text-shadow: none;
}
.cyber-link:hover::after {
opacity: 1; left: 4px;
animation: glitch-jerk 0.3s linear infinite alternate;
}
/* 5. Glitch Animation Keyframes */
@keyframes glitch-jerk {
0% { clip-path: polygon(0 20%, 100% 20%, 100% 50%, 0 50%); transform: translate(0); }
50% { clip-path: polygon(0 30%, 100% 30%, 100% 60%, 0 60%); transform: translate(-2px); }
100% { clip-path: polygon(0 10%, 100% 10%, 100% 40%, 0 40%); transform: translate(2px); }
}
</style>
</head>
<body>
<a href="https://ahmodmusa.com" target="_blank" class="cyber-link" data-text="ahmodmusa.com">
ahmodmusa.com
</a>
</body>
</html>
Conclusion
The beauty of this effect is that it looks complex, but it relies on standard CSS properties like clip-path and pseudo-elements.
Feel free to copy this code and use it in your next sci-fi project, portfolio, or 404 page.
Did you find this tutorial helpful? Check out my other HTML & CSS Experiments or Hire Me to build a unique web experience for your brand.
Happy Coding! 💻⚡
