Animated Gradient Background
The classic moving gradient: four colors on a 400% canvas that pans back and forth. Only background-position animates, and every color is derived from your accent.
Also known as: moving gradient background css, css animated background gradient, gradient animation css.
HTML
<div class="bgx-animated-gradient" aria-hidden="true"></div>
CSS
.bgx-animated-gradient {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
background: linear-gradient(-45deg, oklch(from var(--c) 0.74 0.16 calc(h + 130)), oklch(from var(--c) 0.64 0.22 calc(h + 90)), var(--c), oklch(from var(--c) 0.78 0.13 calc(h - 80)));
background-size: 400% 400%;
animation: bgx-animated-gradient-pan 15s ease -4s infinite;
}
@keyframes bgx-animated-gradient-pan {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-animated-gradient, .bgx-animated-gradient *, .bgx-animated-gradient::before, .bgx-animated-gradient::after, .bgx-animated-gradient *::before, .bgx-animated-gradient *::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.