Snowfall Background: CSS Animated Background

Snowfall Background

Snow falls in three depths over a winter night, near flakes bigger, softer and faster than far ones, each layer swaying on its own. Tiled gradients keep it to three moving layers.

Also known as: css snow animation, falling snow background css, snow effect css.

Color Pattern scale 16px Dark background

HTML

<div class="bgx-snowfall" aria-hidden="true"><span></span><span></span><span></span></div>

CSS

.bgx-snowfall {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 120% 34% at 50% 112%, rgb(255 255 255 / 0.4), transparent),
    linear-gradient(to bottom, #172033, color-mix(in srgb, var(--c) 26%, #4a5877));}
.bgx-snowfall span {
  position: absolute;
  inset: calc(var(--tile) * -1) -1em 0;
  background-size: var(--tile) var(--tile);
  animation:
    bgx-snowfall-fall var(--dur) linear infinite,
    bgx-snowfall-sway var(--sway) ease-in-out infinite alternate;
}
.bgx-snowfall span:nth-child(1) {
  --tile: 10em;
  --dur: 16s;
  --sway: 3s;
  background-image:
    radial-gradient(circle 0.1em at 4.1% 73.8%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 31% 49%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 66.4% 26%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 55.8% 82.2%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 86% 65.2%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 22.4% 39.3%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 59.5% 36.5%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 21.1% 39%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 13.3% 72.7%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 21.6% 48.5%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 49.6% 60.8%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 16% 27.2%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 11.2% 14.3%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 88.7% 43.6%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 36.4% 5.4%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 31.7% 89.9%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 46.1% 59.6%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 40.8% 81.2%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 37.7% 38.2%, rgb(255 255 255 / 0.6) 50%, transparent),
    radial-gradient(circle 0.1em at 16% 44.3%, rgb(255 255 255 / 0.6) 50%, transparent);
}
.bgx-snowfall span:nth-child(2) {
  --tile: 15em;
  --dur: 11s;
  --sway: 4s;
  background-image:
    radial-gradient(circle 0.2em at 4.1% 30.2%, rgb(255 255 255 / 0.9) 45%, transparent),
    radial-gradient(circle 0.2em at 33.1% 33.8%, rgb(255 255 255 / 0.9) 45%, transparent),
    radial-gradient(circle 0.2em at 78.5% 14.6%, rgb(255 255 255 / 0.9) 45%, transparent),
    radial-gradient(circle 0.2em at 73.1% 56%, rgb(255 255 255 / 0.9) 45%, transparent),
    radial-gradient(circle 0.2em at 60% 41.2%, rgb(255 255 255 / 0.9) 45%, transparent),
    radial-gradient(circle 0.2em at 71.5% 46.4%, rgb(255 255 255 / 0.9) 45%, transparent),
    radial-gradient(circle 0.2em at 89.3% 49.2%, rgb(255 255 255 / 0.9) 45%, transparent),
    radial-gradient(circle 0.2em at 40.8% 50%, rgb(255 255 255 / 0.9) 45%, transparent),
    radial-gradient(circle 0.2em at 76.3% 75.5%, rgb(255 255 255 / 0.9) 45%, transparent),
    radial-gradient(circle 0.2em at 70.7% 73.1%, rgb(255 255 255 / 0.9) 45%, transparent),
    radial-gradient(circle 0.2em at 19.3% 37.5%, rgb(255 255 255 / 0.9) 45%, transparent),
    radial-gradient(circle 0.2em at 48.8% 93.6%, rgb(255 255 255 / 0.9) 45%, transparent);
}
.bgx-snowfall span:nth-child(3) {
  --tile: 24em;
  --dur: 7s;
  --sway: 5s;
  background-image:
    radial-gradient(circle 0.5em at 4.1% 83.5%, #fff 18%, rgb(255 255 255 / 0.45) 50%, transparent),
    radial-gradient(circle 0.5em at 39.3% 80.1%, #fff 18%, rgb(255 255 255 / 0.45) 50%, transparent),
    radial-gradient(circle 0.5em at 22.6% 72.3%, #fff 18%, rgb(255 255 255 / 0.45) 50%, transparent),
    radial-gradient(circle 0.5em at 33.1% 69.5%, #fff 18%, rgb(255 255 255 / 0.45) 50%, transparent),
    radial-gradient(circle 0.5em at 74% 61.1%, #fff 18%, rgb(255 255 255 / 0.45) 50%, transparent),
    radial-gradient(circle 0.5em at 34.9% 67.9%, #fff 18%, rgb(255 255 255 / 0.45) 50%, transparent);
}
@keyframes bgx-snowfall-fall {
  to { transform: translateY(var(--tile)); }
}
@keyframes bgx-snowfall-sway {
  from { translate: -0.7em 0; }
  to   { translate: 0.7em 0; }
}

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

Snowfall Background

HTML

CSS

Customizing this snippet

Similar animated backgrounds