.scanlines { overflow: hidden; } .scanlines:before, .scanlines:after { display: block; pointer-events: none; content: ""; position: absolute; } .scanlines:before { width: 100%; height: 2px; z-index: 2147483649; background: rgba(0, 0, 0, 0.3); opacity: 0.75; animation: scanline 6s linear infinite; } .scanlines:after { top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483648; background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.3) 51%); background-size: 100% 4px; animation: scanlines 1s steps(60) infinite; } /* ANIMATE UNIQUE SCANLINE */ @keyframes scanline { 0% { transform: translate3d(0, 200000%, 0); } } @keyframes scanlines { 0% { background-position: 0 50%; } } div { margin: 0; padding: 0; } div.scanlines { position: absolute; } .microlight>span:nth-child(6) { color: var(--status-color); }