Subtle Gradient Sweep Background
A near-white page with a faint accent wash at the top and a wide, soft band of tinted light that glides across every nine seconds, then rests. Made to sit behind dark text on a light hero.
Also known as: subtle animated gradient background, css hero background animation, light hero background css.
HTML
<div class="bgx-subtle-sweep" aria-hidden="true"><span></span></div>
CSS
.bgx-subtle-sweep {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
background:
radial-gradient(ellipse 70% 60% at 50% -10%, oklch(from var(--c) 0.88 0.06 calc(h + 0) / 0.8), transparent 70%),
linear-gradient(oklch(from var(--c) 0.975 0.012 calc(h + 0)), oklch(from var(--c) 0.99 0.004 calc(h + 0)) 70%);
}
.bgx-subtle-sweep span {
position: absolute;
top: -20%;
bottom: -20%;
left: -60%;
width: 60%;
background: linear-gradient(90deg, transparent, oklch(from var(--c) 0.86 0.09 calc(h + 0) / 0.75) 42%, oklch(from var(--c) 0.88 0.08 calc(h + 70) / 0.65) 58%, transparent);
transform: skewX(-20deg);
animation: bgx-subtle-sweep-glide 9s cubic-bezier(0.45, 0, 0.25, 1) -2.6s infinite;
}
@keyframes bgx-subtle-sweep-glide {
0% { transform: skewX(-20deg) translateX(0); }
70%, 100% { transform: skewX(-20deg) translateX(300%); }
}
@media (prefers-reduced-motion: reduce) {
.bgx-subtle-sweep, .bgx-subtle-sweep *, .bgx-subtle-sweep::before, .bgx-subtle-sweep::after, .bgx-subtle-sweep *::before, .bgx-subtle-sweep *::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.