Glitch text effect with CSS only [Kevin Powell]
Stolen from here https://codepen.io/kevinpowell/pen/YzqerQm
Last active
March 22, 2021 17:04
-
-
Save JVegaB/2865c0f7b044633454bbaf1aaadf12af to your computer and use it in GitHub Desktop.
Glitch text effect with CSS only [Kevin Powell]
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1 class="glitch"> | |
| <span aria-hidden="true">Glitch text</span> | |
| Glitch text | |
| <span aria-hidden="true">Glitch text</span> | |
| </h1> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment