Fog Background
Banks of mist roll in opposite directions over a pine treeline at night, thickening and thinning as they pass. Pines are tiled conic gradients, each fog bank a repeat-x tile that wraps at the edges.
Also known as: fog animation css, mist background css, moving fog effect css.
HTML
<div class="bgx-fog" aria-hidden="true"><span></span><span></span><span></span></div>
CSS
.bgx-fog {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
--mist: color-mix(in srgb, var(--c) 14%, #dfe6f0);
--pine: color-mix(in srgb, var(--c) 10%, #05080d);
background:
conic-gradient(from 168deg at 50% 0, var(--pine) 24deg, transparent 0) 0 100% / 1.5em 3.2em repeat-x,
conic-gradient(from 166deg at 50% 0, color-mix(in srgb, var(--pine), #3a4760 25%) 28deg, transparent 0) 0.6em 100% / 2.2em 4.6em repeat-x,
conic-gradient(from 165deg at 50% 0, color-mix(in srgb, var(--pine), #3a4760 45%) 30deg, transparent 0) 1.3em 100% / 3.1em 6.2em repeat-x,
linear-gradient(to bottom, #0b1020, color-mix(in srgb, var(--c) 24%, #283248));}
.bgx-fog span {
position: absolute;
left: 0;
right: calc(var(--tile) * -1);
bottom: var(--b);
height: var(--h);
background-size: var(--tile) 100%;
background-repeat: repeat-x;
animation:
bgx-fog-drift var(--dur) linear infinite var(--dir),
bgx-fog-breathe var(--br) ease-in-out infinite alternate;
}
.bgx-fog span:nth-child(1) {
--tile: 30em;
--h: 9em;
--b: 18%;
--dur: 50s;
--dir: reverse;
--br: 5s;
background-image:
radial-gradient(8em 40% at 5em 50%, color-mix(in srgb, var(--mist) 26%, transparent), transparent),
radial-gradient(8em 40% at 35em 50%, color-mix(in srgb, var(--mist) 26%, transparent), transparent),
radial-gradient(9em 36% at 16em 40%, color-mix(in srgb, var(--mist) 26%, transparent), transparent),
radial-gradient(7em 42% at 25em 58%, color-mix(in srgb, var(--mist) 26%, transparent), transparent),
radial-gradient(7em 42% at -5em 58%, color-mix(in srgb, var(--mist) 26%, transparent), transparent);
}
.bgx-fog span:nth-child(2) {
--tile: 24em;
--h: 8em;
--b: -1em;
--dur: 30s;
--dir: normal;
--br: 4s;
background-image:
radial-gradient(5em 38% at 3em 55%, color-mix(in srgb, var(--mist) 42%, transparent), transparent),
radial-gradient(5em 38% at 27em 55%, color-mix(in srgb, var(--mist) 42%, transparent), transparent),
radial-gradient(6em 36% at 12em 45%, color-mix(in srgb, var(--mist) 42%, transparent), transparent),
radial-gradient(4.5em 36% at 20em 60%, color-mix(in srgb, var(--mist) 42%, transparent), transparent),
radial-gradient(4.5em 36% at -4em 60%, color-mix(in srgb, var(--mist) 42%, transparent), transparent);
}
.bgx-fog span:nth-child(3) {
--tile: 36em;
--h: 7em;
--b: -2.5em;
--dur: 22s;
--dir: reverse;
--br: 6s;
background-image:
radial-gradient(7em 42% at 6em 50%, color-mix(in srgb, var(--mist) 52%, transparent), transparent),
radial-gradient(7em 42% at 42em 50%, color-mix(in srgb, var(--mist) 52%, transparent), transparent),
radial-gradient(6em 38% at 19em 55%, color-mix(in srgb, var(--mist) 52%, transparent), transparent),
radial-gradient(7em 42% at 30em 45%, color-mix(in srgb, var(--mist) 52%, transparent), transparent),
radial-gradient(7em 42% at -6em 45%, color-mix(in srgb, var(--mist) 52%, transparent), transparent);
}
@keyframes bgx-fog-drift {
to { transform: translateX(calc(var(--tile) * -1)); }
}
@keyframes bgx-fog-breathe {
from { opacity: 0.55; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-fog, .bgx-fog *, .bgx-fog::before, .bgx-fog::after, .bgx-fog *::before, .bgx-fog *::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.