Aurora Background
Soft ribbons of accent-tinted light sway, stretch and tilt across the top of a pale page and mix where they cross. A light-mode aurora for SaaS heroes: three blurred bands that only transform.
Also known as: aurora background css, animated aurora background, aurora gradient hero.
HTML
<div class="bgx-aurora" aria-hidden="true"><span></span><span></span><span></span></div>
CSS
.bgx-aurora {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
background: oklch(from var(--c) 0.985 0.006 calc(h + 0));
isolation: isolate;
}
.bgx-aurora span {
position: absolute;
left: -30%;
right: -30%;
top: var(--y);
height: var(--h);
border-radius: 50%;
background: linear-gradient(90deg, transparent 4%, var(--a) 28%, var(--b) 54%, var(--e) 78%, transparent 96%);
filter: blur(1.2em);
mix-blend-mode: multiply;
opacity: var(--o);
animation: bgx-aurora-sway var(--t) cubic-bezier(0.45, 0, 0.55, 1) var(--d) infinite alternate;
}
.bgx-aurora span:nth-child(1) { --y: 2%; --h: 6em; --r: -10deg; --t: 9s; --d: -3s; --o: 0.85; --a: oklch(from var(--c) 0.74 0.15 calc(h + 0)); --b: oklch(from var(--c) 0.84 0.11 calc(h - 55)); --e: oklch(from var(--c) 0.72 0.17 calc(h + 45)); }
.bgx-aurora span:nth-child(2) { --y: 26%; --h: 4.5em; --r: 7deg; --t: 12s; --d: -8s; --o: 0.75; --a: oklch(from var(--c) 0.86 0.1 calc(h - 100)); --b: oklch(from var(--c) 0.76 0.14 calc(h + 0)); --e: oklch(from var(--c) 0.84 0.1 calc(h - 50)); }
.bgx-aurora span:nth-child(3) { --y: 46%; --h: 3.5em; --r: -14deg; --t: 7s; --d: -1s; --o: 0.6; --a: oklch(from var(--c) 0.76 0.15 calc(h + 60)); --b: oklch(from var(--c) 0.88 0.08 calc(h - 80)); --e: oklch(from var(--c) 0.76 0.14 calc(h + 0)); }
@keyframes bgx-aurora-sway {
from { transform: translateX(-10%) rotate(var(--r)) scaleY(0.75); }
to { transform: translateX(10%) rotate(calc(var(--r) * -0.5)) scaleY(1.25); }
}
@media (prefers-reduced-motion: reduce) {
.bgx-aurora, .bgx-aurora *, .bgx-aurora::before, .bgx-aurora::after, .bgx-aurora *::before, .bgx-aurora *::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.