15 CSS Background Animations 06 / 15
Video-Mimicking / Subtle Wave Overlays
Three SVG wave paths sliding at staggered speeds to mimic flowing water beneath a soft pulsing sun, over a warm sunset gradient.
The code
<div class="bga-06">
<div class="bga-06__scene">
<div class="bga-06__sun"></div>
<div class="bga-06__waves">
<div class="bga-06__wave bga-06__wave1">
<svg viewBox="0 0 1440 320" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#6c5ce7" d="M0,160 C240,80 480,240 720,160 C960,80 1200,240 1440,160 L1440,320 L0,320 Z"/>
</svg>
</div>
<div class="bga-06__wave bga-06__wave2">
<svg viewBox="0 0 1440 320" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#a29bfe" d="M0,200 C360,120 720,280 1080,200 C1260,160 1380,220 1440,200 L1440,320 L0,320 Z"/>
</svg>
</div>
<div class="bga-06__wave bga-06__wave3">
<svg viewBox="0 0 1440 320" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#5f3dc4" d="M0,240 C300,180 600,300 900,240 C1140,190 1320,270 1440,240 L1440,320 L0,320 Z"/>
</svg>
</div>
</div>
</div>
</div> <div class="bga-06">
<div class="bga-06__scene">
<div class="bga-06__sun"></div>
<div class="bga-06__waves">
<div class="bga-06__wave bga-06__wave1">
<svg viewBox="0 0 1440 320" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#6c5ce7" d="M0,160 C240,80 480,240 720,160 C960,80 1200,240 1440,160 L1440,320 L0,320 Z"/>
</svg>
</div>
<div class="bga-06__wave bga-06__wave2">
<svg viewBox="0 0 1440 320" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#a29bfe" d="M0,200 C360,120 720,280 1080,200 C1260,160 1380,220 1440,200 L1440,320 L0,320 Z"/>
</svg>
</div>
<div class="bga-06__wave bga-06__wave3">
<svg viewBox="0 0 1440 320" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#5f3dc4" d="M0,240 C300,180 600,300 900,240 C1140,190 1320,270 1440,240 L1440,320 L0,320 Z"/>
</svg>
</div>
</div>
</div>
</div>.bga-06, .bga-06 *, .bga-06 *::before, .bga-06 *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.bga-06 {
min-height: 460px;
display: grid;
place-items: stretch;
}
.bga-06__scene {
width: 100%;
min-height: 460px;
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #fceabb 0%, #ffd6a5 30%, #ff9a8b 60%, #a18cd1 100%);
}
/* Soft sun glow */
.bga-06__sun {
position: absolute;
top: 14%; left: 50%;
width: 220px; height: 220px;
margin-left: -110px;
background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,220,150,0.5) 45%, transparent 70%);
border-radius: 50%;
filter: blur(2px);
animation: bga-06-pulse 8s ease-in-out infinite;
}
.bga-06__waves {
position: absolute;
bottom: 0; left: 0;
width: 100%;
height: 55%;
}
.bga-06__wave {
position: absolute;
bottom: 0; left: 0;
width: 200%;
height: 100%;
}
.bga-06__wave svg { display: block; width: 100%; height: 100%; }
.bga-06__wave1 { animation: bga-06-waveX 14s linear infinite; opacity: 0.55; }
.bga-06__wave2 { animation: bga-06-waveX 10s linear infinite reverse; opacity: 0.4; }
.bga-06__wave3 { animation: bga-06-waveX 18s linear infinite; opacity: 0.7; }
@keyframes bga-06-waveX {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes bga-06-pulse {
0%, 100% { transform: scale(1); opacity: 0.9; }
50% { transform: scale(1.08); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.bga-06__sun,
.bga-06__wave1,
.bga-06__wave2,
.bga-06__wave3 {
animation: none !important;
}
} .bga-06, .bga-06 *, .bga-06 *::before, .bga-06 *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.bga-06 {
min-height: 460px;
display: grid;
place-items: stretch;
}
.bga-06__scene {
width: 100%;
min-height: 460px;
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #fceabb 0%, #ffd6a5 30%, #ff9a8b 60%, #a18cd1 100%);
}
/* Soft sun glow */
.bga-06__sun {
position: absolute;
top: 14%; left: 50%;
width: 220px; height: 220px;
margin-left: -110px;
background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,220,150,0.5) 45%, transparent 70%);
border-radius: 50%;
filter: blur(2px);
animation: bga-06-pulse 8s ease-in-out infinite;
}
.bga-06__waves {
position: absolute;
bottom: 0; left: 0;
width: 100%;
height: 55%;
}
.bga-06__wave {
position: absolute;
bottom: 0; left: 0;
width: 200%;
height: 100%;
}
.bga-06__wave svg { display: block; width: 100%; height: 100%; }
.bga-06__wave1 { animation: bga-06-waveX 14s linear infinite; opacity: 0.55; }
.bga-06__wave2 { animation: bga-06-waveX 10s linear infinite reverse; opacity: 0.4; }
.bga-06__wave3 { animation: bga-06-waveX 18s linear infinite; opacity: 0.7; }
@keyframes bga-06-waveX {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes bga-06-pulse {
0%, 100% { transform: scale(1); opacity: 0.9; }
50% { transform: scale(1.08); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.bga-06__sun,
.bga-06__wave1,
.bga-06__wave2,
.bga-06__wave3 {
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 BackgroundInteractive or Click-to-Expand Ripple/Static EffectsMoving Geometric & Angled Patterns
View the full collection →