Skip to content

Instantly share code, notes, and snippets.

@Zibri

Zibri/crt.css

Last active April 2, 2023 13:02
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Zibri/4643141c3706ec9a0477545b2bba2f57 to your computer and use it in GitHub Desktop.
Save Zibri/4643141c3706ec9a0477545b2bba2f57 to your computer and use it in GitHub Desktop.
Download ZIP
CRT effect with flickering scanlines and RGB grid.
Raw
crt.css
// CRT effect with flickering scanlines and RGB grid.
// By zibri@zibri.org
// <html class="crt"> </html>
@keyframes flicker {
50% {
top: -3px
}
}
.crt::before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: " ";
display: block;
background: linear-gradient(rgba(18,16,16,0) 50%,rgba(0,0,0,.5) 50%),linear-gradient(90deg,rgba(255,0,0,.1),rgba(0,255,0,.05),rgba(0,0,255,.1),rgba(0,0,0,.2));
z-index: 2;
background-size: 100% 4px,3px 100%;
pointer-events: none;
filter: contrast(80%); // it helps... lower this to 50% for a stronger effect
animation: flicker .08s step-end infinite
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment