Rotating Conic Gradient Background
A wide conic gradient of four accent hues turns slowly behind a soft dark vignette, like colored light swinging round a stage. The layer only rotates, which is cheap on any size.
Also known as: css conic gradient animation, spinning gradient background, rotating gradient css.
HTML
<div class="bgx-conic-gradient" aria-hidden="true"></div>
CSS
.bgx-conic-gradient {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
background: #06070d;
}
.bgx-conic-gradient::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 300%;
aspect-ratio: 1;
translate: -50% -50%;
background: conic-gradient(var(--c), oklch(from var(--c) 0.66 0.24 calc(h + 80)), oklch(from var(--c) 0.8 0.16 calc(h + 150)), oklch(from var(--c) 0.74 0.14 calc(h - 70)), var(--c));
opacity: 0.85;
animation: bgx-conic-gradient-spin 18s linear infinite;
}
.bgx-conic-gradient::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 50%, rgb(6 7 13 / 0.55), transparent 22%),
radial-gradient(ellipse 75% 95% at 50% 50%, transparent 30%, rgb(6 7 13 / 0.85));
}
@keyframes bgx-conic-gradient-spin {
to { transform: rotate(1turn); }
}
@media (prefers-reduced-motion: reduce) {
.bgx-conic-gradient, .bgx-conic-gradient *, .bgx-conic-gradient::before, .bgx-conic-gradient::after, .bgx-conic-gradient *::before, .bgx-conic-gradient *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Tailwind CSS version
The same effect using Tailwind utility classes. No custom CSS or config needed.
<div class="absolute inset-0 overflow-hidden bg-[#06070d]" aria-hidden="true">
<div class="absolute left-1/2 top-1/2 aspect-square w-[300%] -translate-x-1/2 -translate-y-1/2">
<div class="h-full w-full animate-spin bg-[conic-gradient(#3b82f6,#d946ef,#fb923c,#2dd4bf,#3b82f6)] opacity-[0.85] [animation-duration:18s]"></div>
</div>
<div class="absolute inset-0 bg-[radial-gradient(circle,rgb(6_7_13/0.55),transparent_22%),radial-gradient(ellipse_75%_95%,transparent_30%,rgb(6_7_13/0.85))]"></div>
</div>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.