GLITCH EFFECT GENERATOR
Create stunning CSS glitch text effects with real-time preview and customizable parameters. Copy the generated code with one click!
Preview
GLITCH TEXT
Customization
Glitch Type
Standard
Intense
Colors
Primary
Secondary
Accent
Medium
Normal
Large
CSS Code
HTML Code
.glitch-text {
position: relative;
display: inline-block;
font-family: 'Orbitron', monospace;
font-weight: 900;
color: white;
text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
-0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
animation: glitch 500ms infinite;
}
.glitch-text::before,
.glitch-text::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.glitch-text::before {
animation: glitch-1 650ms infinite;
clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
transform: translate(-0.025em, -0.0125em);
opacity: 0.8;
color: #ff00ff;
}
.glitch-text::after {
animation: glitch-2 375ms infinite;
clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
transform: translate(0.0125em, 0.025em);
opacity: 0.8;
color: #00ffff;
}
@keyframes glitch {
0% {
text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
-0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
}
14% {
text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
-0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
}
15% {
text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
-0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
}
49% {
text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
-0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
}
50% {
text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
0.05em 0 0 rgba(0, 255, 0, 0.75),
0 -0.05em 0 rgba(0, 0, 255, 0.75);
}
99% {
text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
0.05em 0 0 rgba(0, 255, 0, 0.75),
0 -0.05em 0 rgba(0, 0, 255, 0.75);
}
100% {
text-shadow: -0.025em 0 0 rgba(255, 0, 0, 0.75),
-0.025em -0.025em 0 rgba(0, 255, 0, 0.75),
-0.025em -0.05em 0 rgba(0, 0, 255, 0.75);
}
}
@keyframes glitch-1 {
0% {
transform: translate(0);
}
20% {
transform: translate(-2px, 2px);
}
40% {
transform: translate(-2px, -2px);
}
60% {
transform: translate(2px, 2px);
}
80% {
transform: translate(2px, -2px);
}
100% {
transform: translate(0);
}
}
@keyframes glitch-2 {
0% {
transform: translate(0);
}
20% {
transform: translate(2px, 2px);
}
40% {
transform: translate(2px, -2px);
}
60% {
transform: translate(-2px, 2px);
}
80% {
transform: translate(-2px, -2px);
}
100% {
transform: translate(0);
}
}