Skip to content

Instantly share code, notes, and snippets.

@Zibri
Last active Dec 1, 2019
Embed
What would you like to do?
CRT effect with flickering scanlines and RGB grid.
// 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