15 CSS Background Animations 04 / 15
Interactive or Click-to-Expand Ripple/Static Effects
A cyberpunk surface with animated TV static, scanlines, and a hue-shifting tint — click anywhere to fire an expanding neon ripple, driven entirely by a CSS :checked toggle (no JS).
Best forretro/VHS UI trends.
The code
<div class="bga-04">
<div class="bga-04__scene">
<input type="radio" id="bga-04-r1" name="bga-04-ripple" class="bga-04__trigger">
<div class="bga-04__hint">click anywhere</div>
<div class="bga-04__surface">
<label for="bga-04-r1"></label>
<span class="bga-04__ripple"></span>
</div>
</div>
</div> <div class="bga-04">
<div class="bga-04__scene">
<input type="radio" id="bga-04-r1" name="bga-04-ripple" class="bga-04__trigger">
<div class="bga-04__hint">click anywhere</div>
<div class="bga-04__surface">
<label for="bga-04-r1"></label>
<span class="bga-04__ripple"></span>
</div>
</div>
</div>.bga-04, .bga-04 *, .bga-04 *::before, .bga-04 *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.bga-04 {
min-height: 460px;
display: grid;
place-items: stretch;
}
.bga-04__scene {
width: 100%;
min-height: 460px;
position: relative;
overflow: hidden;
background: #0d0f14;
cursor: crosshair;
}
/* Animated TV static / grain overlay */
.bga-04__scene::before {
content: "";
position: absolute;
inset: -50%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.12;
animation: bga-04-static 0.6s steps(4) infinite;
pointer-events: none;
}
/* Scanlines + cyberpunk tint */
.bga-04__scene::after {
content: "";
position: absolute;
inset: 0;
background:
repeating-linear-gradient(0deg, rgba(0,0,0,0.25) 0 1px, transparent 1px 3px),
radial-gradient(circle at 50% 50%, rgba(0,255,200,0.06), transparent 70%),
radial-gradient(circle at 50% 50%, rgba(255,0,128,0.05), transparent 80%);
pointer-events: none;
animation: bga-04-hueShift 12s linear infinite;
}
/* Toggle (radio) drives the ripple via :checked, no JS */
.bga-04__trigger { position: absolute; opacity: 0; pointer-events: none; }
.bga-04__surface {
position: absolute;
inset: 0;
z-index: 2;
}
.bga-04__surface label {
display: block;
width: 100%;
height: 100%;
cursor: crosshair;
}
.bga-04__ripple {
position: absolute;
top: 50%; left: 50%;
width: 40px; height: 40px;
margin: -20px 0 0 -20px;
border: 2px solid rgba(0,255,200,0.8);
border-radius: 50%;
transform: scale(0);
opacity: 0;
}
#bga-04-r1:checked ~ .bga-04__surface .bga-04__ripple { animation: bga-04-ripple 1.6s ease-out; }
@keyframes bga-04-ripple {
0% { transform: scale(0); opacity: 0.9; border-color: rgba(0,255,200,0.9); }
50% { opacity: 0.5; border-color: rgba(255,0,128,0.7); }
100% { transform: scale(28); opacity: 0; border-color: rgba(120,80,255,0); }
}
@keyframes bga-04-static {
0% { transform: translate(0,0); }
25% { transform: translate(-4%, 3%); }
50% { transform: translate(3%, -2%); }
75% { transform: translate(-2%, -3%); }
100% { transform: translate(2%, 2%); }
}
@keyframes bga-04-hueShift { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
.bga-04__hint {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
color: rgba(0,255,200,0.55);
font: 600 14px/1.4 ui-monospace, monospace;
letter-spacing: 3px;
text-transform: uppercase;
z-index: 1;
pointer-events: none;
text-shadow: 0 0 8px rgba(0,255,200,0.5);
}
@media (prefers-reduced-motion: reduce) {
.bga-04__scene::before,
.bga-04__scene::after,
.bga-04__ripple {
animation: none !important;
}
} .bga-04, .bga-04 *, .bga-04 *::before, .bga-04 *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.bga-04 {
min-height: 460px;
display: grid;
place-items: stretch;
}
.bga-04__scene {
width: 100%;
min-height: 460px;
position: relative;
overflow: hidden;
background: #0d0f14;
cursor: crosshair;
}
/* Animated TV static / grain overlay */
.bga-04__scene::before {
content: "";
position: absolute;
inset: -50%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.12;
animation: bga-04-static 0.6s steps(4) infinite;
pointer-events: none;
}
/* Scanlines + cyberpunk tint */
.bga-04__scene::after {
content: "";
position: absolute;
inset: 0;
background:
repeating-linear-gradient(0deg, rgba(0,0,0,0.25) 0 1px, transparent 1px 3px),
radial-gradient(circle at 50% 50%, rgba(0,255,200,0.06), transparent 70%),
radial-gradient(circle at 50% 50%, rgba(255,0,128,0.05), transparent 80%);
pointer-events: none;
animation: bga-04-hueShift 12s linear infinite;
}
/* Toggle (radio) drives the ripple via :checked, no JS */
.bga-04__trigger { position: absolute; opacity: 0; pointer-events: none; }
.bga-04__surface {
position: absolute;
inset: 0;
z-index: 2;
}
.bga-04__surface label {
display: block;
width: 100%;
height: 100%;
cursor: crosshair;
}
.bga-04__ripple {
position: absolute;
top: 50%; left: 50%;
width: 40px; height: 40px;
margin: -20px 0 0 -20px;
border: 2px solid rgba(0,255,200,0.8);
border-radius: 50%;
transform: scale(0);
opacity: 0;
}
#bga-04-r1:checked ~ .bga-04__surface .bga-04__ripple { animation: bga-04-ripple 1.6s ease-out; }
@keyframes bga-04-ripple {
0% { transform: scale(0); opacity: 0.9; border-color: rgba(0,255,200,0.9); }
50% { opacity: 0.5; border-color: rgba(255,0,128,0.7); }
100% { transform: scale(28); opacity: 0; border-color: rgba(120,80,255,0); }
}
@keyframes bga-04-static {
0% { transform: translate(0,0); }
25% { transform: translate(-4%, 3%); }
50% { transform: translate(3%, -2%); }
75% { transform: translate(-2%, -3%); }
100% { transform: translate(2%, 2%); }
}
@keyframes bga-04-hueShift { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
.bga-04__hint {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
color: rgba(0,255,200,0.55);
font: 600 14px/1.4 ui-monospace, monospace;
letter-spacing: 3px;
text-transform: uppercase;
z-index: 1;
pointer-events: none;
text-shadow: 0 0 8px rgba(0,255,200,0.5);
}
@media (prefers-reduced-motion: reduce) {
.bga-04__scene::before,
.bga-04__scene::after,
.bga-04__ripple {
animation: none !important;
}
}More from 15 CSS Background Animations
Matrix Digital Rain BackgroundAnimated Mesh Gradient Blob BackgroundFalling Snow Background AnimationAnimated Blob Morphing BackgroundRetro Cyberpunk Grid / Synthwave HorizonInfinite Scrolling Diagonal Text / Marquee BackgroundAnimated Comic Book Dot / Halftone WaveAnimated Gradient Backgrounds (Infinite Shifting)Floating Particle or Bubble EffectsStarry Night / Parallax Space BackgroundMoving Geometric & Angled PatternsVideo-Mimicking / Subtle Wave Overlays
View the full collection →