Wave Background
Four layers of waves roll along the bottom of the section at different speeds, back ones paler and slower, for a parallax sea. Each wave is an SVG tile used as a mask, so it takes your accent.
Also known as: animated wave background css, svg waves animation, hero waves css.
HTML
<div class="bgx-layered-waves" aria-hidden="true"> <span></span><span></span><span></span><span></span> </div>
CSS
.bgx-layered-waves {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
--wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 100' preserveAspectRatio='none'%3E%3Cpath d='M0 60Q150 20 300 60T600 60V100H0Z'/%3E%3C/svg%3E");
background: linear-gradient(color-mix(in srgb, var(--c) 5%, #fff), color-mix(in srgb, var(--c) 16%, #fff));
}
.bgx-layered-waves span {
position: absolute;
left: 0;
bottom: 0;
width: calc(100% + var(--p));
height: var(--h);
background: var(--fill);
-webkit-mask: var(--wave) 0 0 / var(--p) 100% repeat-x;
mask: var(--wave) 0 0 / var(--p) 100% repeat-x;
animation:
bgx-layered-waves-roll var(--t) linear infinite,
bgx-layered-waves-bob 3.2s ease-in-out infinite alternate;
}
.bgx-layered-waves span:nth-child(1) { --p: 34em; --h: 9.5em; --t: 19s; --fill: color-mix(in srgb, var(--c) 22%, transparent); animation-delay: -4s, -1s; }
.bgx-layered-waves span:nth-child(2) { --p: 26em; --h: 7.5em; --t: 13s; --fill: color-mix(in srgb, var(--c) 40%, transparent); animation-delay: -9s, -2.4s; }
.bgx-layered-waves span:nth-child(3) { --p: 30em; --h: 5.5em; --t: 9s; --fill: color-mix(in srgb, var(--c) 65%, transparent); animation-delay: -2s, -0.6s; }
.bgx-layered-waves span:nth-child(4) { --p: 22em; --h: 3.6em; --t: 6s; --fill: var(--c); animation-delay: -3s, -1.8s; }
@keyframes bgx-layered-waves-roll {
to { transform: translateX(calc(var(--p) * -1)); }
}
@keyframes bgx-layered-waves-bob {
from { translate: 0 0; }
to { translate: 0 0.5em; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-layered-waves, .bgx-layered-waves *, .bgx-layered-waves::before, .bgx-layered-waves::after, .bgx-layered-waves *::before, .bgx-layered-waves *::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.