Color Changing Background
The plainest version of the effect: the whole background eases from your accent through three sibling hues and back. One background-color keyframe, plus a soft top light for depth.
Also known as: css background color animation, color cycle background css, changing background color css.
HTML
<div class="bgx-color-changing" aria-hidden="true"></div>
CSS
.bgx-color-changing {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
background-color: var(--c);
animation: bgx-color-changing-cycle 12s ease-in-out -1s infinite;
}
.bgx-color-changing::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 70% at 50% 0%, rgb(255 255 255 / 0.22), transparent 70%),
linear-gradient(transparent 50%, rgb(0 0 0 / 0.18));
}
@keyframes bgx-color-changing-cycle {
0%, 100% { background-color: var(--c); }
25% { background-color: oklch(from var(--c) 0.66 0.2 calc(h + 70)); }
50% { background-color: oklch(from var(--c) 0.72 0.17 calc(h + 150)); }
75% { background-color: oklch(from var(--c) 0.7 0.15 calc(h - 70)); }
}
@media (prefers-reduced-motion: reduce) {
.bgx-color-changing, .bgx-color-changing *, .bgx-color-changing::before, .bgx-color-changing::after, .bgx-color-changing *::before, .bgx-color-changing *::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.