TV Static Background
An old CRT tuned to nothing: coarse static that jumps every frame, dark scanlines and a bright bar rolling down the screen, tinted with your accent. The noise is SVG turbulence moved in steps.
Also known as: tv noise background css, static noise animation, crt screen effect css.
HTML
<div class="bgx-tv-static" aria-hidden="true"> <span class="bgx-tv-static-snow"></span> <span class="bgx-tv-static-roll"></span> </div>
CSS
.bgx-tv-static {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
container-type: size;
background: #111;
}
.bgx-tv-static-snow {
position: absolute;
inset: -20%;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' preserveAspectRatio='none'%3E%3Cfilter id='s' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='3.2 0 0 0 -1.1 3.2 0 0 0 -1.1 3.2 0 0 0 -1.1 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23s)'/%3E%3C/svg%3E") 0 0 / 10em 10em;
opacity: 0.8;
animation: bgx-tv-static-snow 0.36s steps(1) infinite;
}
.bgx-tv-static-roll {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 30%;
background: linear-gradient(transparent, rgb(255 255 255 / 0.12) 45%, rgb(255 255 255 / 0.2) 50%, transparent);
animation: bgx-tv-static-roll 3.2s linear infinite;
}
.bgx-tv-static::after {
content: "";
position: absolute;
inset: 0;
background:
repeating-linear-gradient(transparent 0 0.12em, rgb(0 0 0 / 0.3) 0.12em 0.25em),
radial-gradient(ellipse at 50% 50%, transparent 50%, rgb(0 0 0 / 0.75)),
color-mix(in srgb, var(--c) 45%, #fff);
mix-blend-mode: multiply;
}
@keyframes bgx-tv-static-snow {
0% { transform: translate(0, 0); }
17% { transform: translate(-6%, 4%); }
33% { transform: translate(5%, -7%); }
50% { transform: translate(-3%, -4%); }
67% { transform: translate(7%, 6%); }
83% { transform: translate(-7%, 1%); }
}
@keyframes bgx-tv-static-roll {
from { transform: translateY(-100%); }
to { transform: translateY(calc(100cqh + 100%)); }
}
@media (prefers-reduced-motion: reduce) {
.bgx-tv-static, .bgx-tv-static *, .bgx-tv-static::before, .bgx-tv-static::after, .bgx-tv-static *::before, .bgx-tv-static *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--bgx-coloron the element or a parent. Currently previewing#3b82f6. - Pattern scale: set
--bgx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.