Sunset Sky Background: CSS Animated Background

Sunset Sky Background

A full day in twenty seconds: the sun arcs over dark hills, the sky warms into sunset and fades to night as the moon rises. One rotating arm carries both, and the skies crossfade.

Also known as: day to night sky css, sunset gradient animation, sky color change animation.

Color Pattern scale 16px Dark background

HTML

<div class="bgx-sunset-sky" aria-hidden="true">
  <span class="bgx-sunset-sky-dusk"></span>
  <span class="bgx-sunset-sky-night"></span>
  <span class="bgx-sunset-sky-arm"></span>
  <span class="bgx-sunset-sky-hills"></span>
</div>

CSS

.bgx-sunset-sky {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --t: 20s;
  --d: -9.6s;
  background: linear-gradient(oklch(from var(--c) 0.58 0.14 calc(h + 0)), oklch(from var(--c) 0.86 0.07 calc(h - 15)) 75%);
}
.bgx-sunset-sky span {
  position: absolute;
}
.bgx-sunset-sky-dusk,
.bgx-sunset-sky-night {
  inset: 0;
}
.bgx-sunset-sky-dusk {
  background: linear-gradient(#27266a, #8c3d88 38%, #f0735a 70%, #ffc27a);
  animation: bgx-sunset-sky-dusk var(--t) linear var(--d) infinite;
}
.bgx-sunset-sky-night {
  background: linear-gradient(#02030f, #0a1230 60%, #1b2350);
  animation: bgx-sunset-sky-night var(--t) linear var(--d) infinite;
}
.bgx-sunset-sky-arm {
  left: 50%;
  top: 100%;
  animation: bgx-sunset-sky-turn var(--t) linear var(--d) infinite;
}
.bgx-sunset-sky-arm::before,
.bgx-sunset-sky-arm::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  translate: -50% -50%;
}
.bgx-sunset-sky-arm::before {
  top: -13em;
  width: 3.2em;
  aspect-ratio: 1;
  background: radial-gradient(circle at 45% 40%, #fffbe6, #ffd166 55%, #ff9f43);
  box-shadow: 0 0 2.5em 0.6em rgb(255 190 100 / 0.55);
}
.bgx-sunset-sky-arm::after {
  top: 13em;
  width: 2.2em;
  aspect-ratio: 1;
  background: #eef2ff;
  box-shadow: inset -0.55em -0.2em 0 #c3cbe6, 0 0 1.6em rgb(220 228 255 / 0.35);
}
.bgx-sunset-sky-hills {
  left: -5%;
  right: -5%;
  bottom: 0;
  height: 28%;
  background:
    radial-gradient(ellipse 38% 100% at 22% 100%, #1d2b3a 98%, transparent 100%),
    radial-gradient(ellipse 45% 85% at 78% 100%, #14202d 98%, transparent 100%),
    linear-gradient(transparent 55%, #101a26 56%);
}
.bgx-sunset-sky-hills::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  filter: brightness(0.35);
  animation: bgx-sunset-sky-night var(--t) linear var(--d) infinite;
}
@keyframes bgx-sunset-sky-turn {
  0%   { transform: rotate(-100deg); }
  62%  { transform: rotate(100deg); }
  100% { transform: rotate(260deg); }
}
@keyframes bgx-sunset-sky-dusk {
  0%, 100% { opacity: 0.7; }
  4%  { opacity: 0.9; }
  10% { opacity: 0.5; }
  16%, 40%, 66% { opacity: 0; }
  48% { opacity: 0.7; }
  54% { opacity: 1; }
  60% { opacity: 0.6; }
}
@keyframes bgx-sunset-sky-night {
  0%, 100% { opacity: 0.75; }
  6%  { opacity: 0.25; }
  10%, 50% { opacity: 0; }
  56% { opacity: 0.35; }
  64%, 94% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bgx-sunset-sky, .bgx-sunset-sky *, .bgx-sunset-sky::before, .bgx-sunset-sky::after, .bgx-sunset-sky *::before, .bgx-sunset-sky *::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.

Sunset Sky Background

HTML

CSS

Customizing this snippet

Similar animated backgrounds