Glitch text effect with CSS only [Kevin Powell]
Stolen from here https://codepen.io/kevinpowell/pen/YzqerQm
Glitch text effect with CSS only [Kevin Powell]
Stolen from here https://codepen.io/kevinpowell/pen/YzqerQm
body { | |
background: #222; | |
min-height: 100vh; | |
display: grid; | |
place-items: center; | |
color: white; | |
font-family: sans-serif; | |
} | |
.glitch { | |
font-size: 8rem; | |
font-weight: 700; | |
text-transform: uppercase; | |
position: relative; | |
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 span { | |
position: absolute; | |
top: 0; | |
left: 0; | |
} | |
.glitch span:first-child { | |
animation: glitch 650ms infinite; | |
clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); | |
transform: translate(-0.025em, -0.0125em); | |
/* color: green; */ | |
opacity: 0.8; | |
} | |
.glitch span:last-child { | |
animation: glitch 375ms infinite; | |
clip-path: polygon(0 80%, 100% 20%, 100% 100%, 0 100%); | |
transform: translate(0.0125em, 0.025em); | |
/* color: red; */ | |
opacity: 0.8; | |
} | |
/* https://web.dev/prefers-reduced-motion/#(bonus)-forcing-reduced-motion-on-all-websites */ | |
@keyframes glitch { | |
0% { | |
text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75), | |
-0.05em -0.025em 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.05em -0.025em 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); | |
} | |
} | |
@media (prefers-reduced-motion: reduce) { | |
*, | |
::before, | |
::after { | |
animation-delay: -1ms !important; | |
animation-duration: 1ms !important; | |
animation-iteration-count: 1 !important; | |
background-attachment: initial !important; | |
scroll-behavior: auto !important; | |
transition-duration: 0s !important; | |
transition-delay: 0s !important; | |
} | |
} |
<h1 class="glitch"> | |
<span aria-hidden="true">Glitch text</span> | |
Glitch text | |
<span aria-hidden="true">Glitch text</span> | |
</h1> |