Repeating horizontal stripes that recreate the visible scan lines of old CRT monitors — a staple of retro-game and VHS moods.
Design Atlas<div class="tv"><div class="content">SIGNAL</div><div class="lines"></div><div class="glow"></div></div>.tv{position:relative;width:min(320px,85%);aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:#04120a;
display:grid;place-items:center;box-shadow:0 0 40px rgba(0,255,140,.15);animation:flicker 4s infinite}
.content{color:#5dffa0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(20px,6vmin,28px);
letter-spacing:.1em;text-shadow:0 0 8px #5dffa0}
.lines{position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(0,0,0,.55) 0 1px,transparent 1px 3px);
animation:roll 6s linear infinite;mix-blend-mode:multiply}
.glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 55%,rgba(0,0,0,.5) 100%)}
@keyframes roll{to{background-position:0 6px}}
@keyframes flicker{0%,96%,100%{opacity:1}97%{opacity:.85}98%{opacity:1}99%{opacity:.92}}Stack alternating transparent and semi-transparent black stripes with repeating-linear-gradient and lay it over the whole screen; a 1–2px pitch approximates real CRT resolution.
Slowly animating the stripes' vertical position (via background-position) adds a faint analogue flicker.
Use for retro-game UI, a VHS filter, terminal/hacker moods. High contrast tires the eye — keep the overlay opacity low.