Dark Aurora Mesh Background: CSS Animated Background

Dark Aurora Mesh Background

Long blurred bands of teal, accent and violet light drift and stretch over a near-black hero under a faint dot grid, the dark aurora mesh look. Bands are radial gradients that only transform.

Also known as: aurora background css, dark aurora gradient, aurora mesh gradient, linear style hero background.

Color Pattern scale 16px Dark background

HTML

<div class="bgx-aurora-mesh-dark" aria-hidden="true"><span></span><span></span><span></span><span></span></div>

CSS

.bgx-aurora-mesh-dark {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #05060b;
  isolation: isolate;}
.bgx-aurora-mesh-dark span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  translate: -50% -50%;
  rotate: var(--r);
  background: radial-gradient(closest-side, var(--a), color-mix(in srgb, var(--a) 40%, transparent) 55%, transparent);
  mix-blend-mode: screen;
  animation: bgx-aurora-mesh-dark-flow var(--t) cubic-bezier(0.45, 0, 0.55, 1) var(--d) infinite alternate;
}
.bgx-aurora-mesh-dark span:nth-child(1) { --x: 28%; --y: 38%; --w: 85%; --h: 46%; --r: -14deg; --t: 11s; --d: -4s; --a: oklch(from var(--c) 0.72 0.15 calc(h - 95) / 0.85); }
.bgx-aurora-mesh-dark span:nth-child(2) { --x: 64%; --y: 30%; --w: 80%; --h: 40%; --r: 10deg; --t: 13s; --d: -9s; --a: oklch(from var(--c) 0.62 0.2 calc(h + 0) / 0.9); }
.bgx-aurora-mesh-dark span:nth-child(3) { --x: 76%; --y: 70%; --w: 70%; --h: 44%; --r: -8deg; --t: 9s; --d: -2s; --a: oklch(from var(--c) 0.58 0.2 calc(h + 55) / 0.75); }
.bgx-aurora-mesh-dark span:nth-child(4) { --x: 22%; --y: 78%; --w: 60%; --h: 34%; --r: 18deg; --t: 15s; --d: -6s; --a: oklch(from var(--c) 0.7 0.13 calc(h - 40) / 0.55); }
.bgx-aurora-mesh-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgb(255 255 255 / 0.32) 0.07em, transparent 0.09em) 0 0 / 1.25em 1.25em;
  -webkit-mask: radial-gradient(ellipse 75% 70% at 50% 45%, #000, transparent);
  mask: radial-gradient(ellipse 75% 70% at 50% 45%, #000, transparent);
}
.bgx-aurora-mesh-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(transparent 55%, rgb(5 6 11 / 0.7));
}
@keyframes bgx-aurora-mesh-dark-flow {
  from { transform: translate(-12%, 6%) scale(0.85, 1); }
  to   { transform: translate(12%, -8%) scale(1.15, 1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .bgx-aurora-mesh-dark, .bgx-aurora-mesh-dark::before, .bgx-aurora-mesh-dark::after, .bgx-aurora-mesh-dark *, .bgx-aurora-mesh-dark *::before, .bgx-aurora-mesh-dark *::after { animation-play-state: paused; }
}

@media (prefers-reduced-motion: reduce) {
  .bgx-aurora-mesh-dark, .bgx-aurora-mesh-dark *, .bgx-aurora-mesh-dark::before, .bgx-aurora-mesh-dark::after, .bgx-aurora-mesh-dark *::before, .bgx-aurora-mesh-dark *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

Color: set --bgx-color on the element or a parent. Currently previewing #3b82f6.
Pattern scale: set --bgx-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
Speed: change the duration on the transition or animation shorthand. 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.

Dark Aurora Mesh Background

HTML

CSS

Customizing this snippet

Similar animated backgrounds