CSS Background Animations Part 2 — 11 More Atmospheric Effects

Try them live — All 11 background effects are available on CSSKit where you can customize parameters and copy the code. Source code on GitHub. See also Background Part 1, Loading Part 1, Hover Part 1.

---

In Background Part 1 we built 10 atmospheric effects — gradients, particles, aurora, ripples, and more. This post completes the background category with 11 more effects covering weather phenomena, retro aesthetics, and organic patterns. Together, that’s all 22 background animations in CSSKit.

80. Aurora Borealis

Flowing northern lights with multiple color bands — ethereal and nature-inspired.

How It Works

Two ::before and ::after pseudo-elements create the aurora bands. Each is a horizontal gradient strip that’s 200% the container width, blurred at 40px, with low opacity. They animate with translateX and skewX to create the flowing curtain effect. The second band has animation-delay: -50% and lower opacity (0.4) for a background layer that moves independently.

.bg-aurora-borealis {
  --bab-color1: #00ff87;
  --bab-color2: #60efff;
  --bab-color3: #7b2ff7;
  --bab-speed: 8s;
  width: 300px;
  height: 150px;
  position: relative;
  overflow: hidden;
  background: #0a0a1a;
  border-radius: 8px;
}

.bg-aurora-borealis::before,
.bg-aurora-borealis::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 60%;
  top: 10%;
  left: -50%;
  filter: blur(40px);
  opacity: 0.6;
  animation: bab-flow var(--bab-speed) ease-in-out infinite alternate;
}

.bg-aurora-borealis::before {
  background: linear-gradient(90deg, var(--bab-color1), var(--bab-color2), var(--bab-color3));
}

.bg-aurora-borealis::after {
  background: linear-gradient(90deg, var(--bab-color3), var(--bab-color1), var(--bab-color2));
  top: 30%;
  animation-delay: calc(var(--bab-speed) * -0.5);
  opacity: 0.4;
}

@keyframes bab-flow {
  0% { transform: translateX(-20%) skewX(-5deg); }
  100% { transform: translateX(20%) skewX(5deg); }
}

<div class="bg-aurora-borealis"></div>

Tip: Increase filter: blur() to 60px for softer bands, or decrease to 20px for sharper curtains.

---

81. Fireflies

Glowing dots drifting through darkness — magical night effect.

How It Works

Eight tiny dots (4px) with box-shadow: 0 0 6px 2px creating the glow. Each dot drifts via translate() (±20px) while its opacity oscillates between 0.2 and 1.0. The alternating opacity at 25% and 75% keyframe stops creates the “blinking” behavior real fireflies have. Different durations (0.6x to 1.3x base speed) make each firefly move at its own pace.

.bg-fireflies span {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--bf-color);
  border-radius: 50%;
  box-shadow: 0 0 6px 2px var(--bf-color);
  animation: bf-drift var(--bf-speed) ease-in-out infinite alternate;
}

.bg-fireflies span:nth-child(1) { top: 20%; left: 15%; animation-duration: calc(var(--bf-speed) * 0.8); }
.bg-fireflies span:nth-child(2) { top: 60%; left: 75%; animation-duration: calc(var(--bf-speed) * 1.2); animation-delay: -1s; }
.bg-fireflies span:nth-child(3) { top: 40%; left: 45%; animation-duration: calc(var(--bf-speed) * 0.6); animation-delay: -2s; }

@keyframes bf-drift {
  0% { transform: translate(0, 0); opacity: 0.2; }
  25% { opacity: 1; }
  50% { transform: translate(20px, -15px); opacity: 0.3; }
  75% { opacity: 0.8; }
  100% { transform: translate(-15px, 10px); opacity: 0.2; }
}

<div class="bg-fireflies"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>

Tip: Change --bf-color to #22d3ee (cyan) for a bioluminescent underwater effect.

---

82. Snowfall

Gentle falling snowflakes with varying sizes — winter scene effect.

How It Works

Eight circles of 3-5px fall from top to bottom with a slight horizontal drift (translateX(20px)). Each has a unique duration (0.6x to 1.3x base) and negative delay for staggered starts. The background uses a gradient from dark blue to darker blue (#1e3a5f → #0f1b2d) for the night sky. Opacity fades in at 10% and starts fading at 90% for soft entry/exit.

.bg-snow span {
  position: absolute;
  top: -10px;
  background: var(--bs-color);
  border-radius: 50%;
  opacity: 0.8;
  animation: bs-fall linear infinite;
}

.bg-snow span:nth-child(1) { left: 10%; width: 4px; height: 4px; animation-duration: calc(var(--bs-speed) * 0.8); }
.bg-snow span:nth-child(2) { left: 25%; width: 3px; height: 3px; animation-duration: calc(var(--bs-speed) * 1.1); animation-delay: -1s; }
.bg-snow span:nth-child(3) { left: 40%; width: 5px; height: 5px; animation-duration: calc(var(--bs-speed) * 0.6); animation-delay: -2s; }

@keyframes bs-fall {
  0% { transform: translateY(-10px) translateX(0); opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.6; }
  100% { transform: translateY(160px) translateX(20px); opacity: 0; }
}

<div class="bg-snow"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>

Tip: Add box-shadow: 0 0 4px #fff to each flake for a glowing snow effect against darker backgrounds.

---

83. Lightning

Random lightning flash with bolt shape — dramatic storm effect.

How It Works

Two layers work together. ::before creates the full-screen flash — it’s transparent for most of the animation, then briefly jumps to opacity: 0.8 at 49%, dips to 0, then flashes again at 51%. This double-flash pattern mimics real lightning. ::after is the bolt itself — a tall thin element shaped with clip-path: polygon() into a zigzag lightning bolt, visible only during the flash frames.

.bg-lightning::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bl-color);
  opacity: 0;
  animation: bl-flash var(--bl-speed) ease-in-out infinite;
}

.bg-lightning::after {
  content: '';
  position: absolute;
  top: 10%;
  left: 45%;
  width: 3px;
  height: 60%;
  background: var(--bl-color);
  clip-path: polygon(0 0, 100% 0, 60% 40%, 100% 40%, 30% 100%, 40% 55%, 0 55%);
  filter: blur(1px);
  opacity: 0;
  animation: bl-bolt var(--bl-speed) ease-in-out infinite;
}

@keyframes bl-flash {
  0%, 100% { opacity: 0; }
  48% { opacity: 0; }
  49% { opacity: 0.8; }
  50% { opacity: 0; }
  51% { opacity: 0.5; }
  52% { opacity: 0; }
}

@keyframes bl-bolt {
  0%, 100% { opacity: 0; }
  49% { opacity: 1; }
  51% { opacity: 1; }
  52% { opacity: 0; }
}

<div class="bg-lightning"></div>

Tip: The flash at 49%-50% then 51% creates the classic double-strike lightning pattern. Add filter: blur(3px) to ::before for a softer ambient flash.

---

84. Smoke

Rising smoke wisps with soft blur — atmospheric and moody.

How It Works

Four blurred oval shapes (filter: blur(20px)) start below the container and rise upward. The key is scale(0.5) at the start growing to scale(1.5) at the end — the smoke expands as it rises. The horizontal drift (translateX(30px)) and fading opacity create the dispersal effect. The heavy blur is what transforms simple shapes into realistic smoke wisps.

.bg-smoke span {
  position: absolute;
  bottom: -20px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.3);
  filter: blur(20px);
  animation: bsm-rise var(--bsm-speed) ease-out infinite;
}

.bg-smoke span:nth-child(1) { left: 20%; width: 60px; height: 40px; animation-duration: calc(var(--bsm-speed) * 0.8); }
.bg-smoke span:nth-child(2) { left: 50%; width: 80px; height: 50px; animation-duration: calc(var(--bsm-speed) * 1.1); animation-delay: -2s; }

@keyframes bsm-rise {
  0% { transform: translateY(0) scale(0.5); opacity: 0; }
  20% { opacity: 0.6; }
  60% { opacity: 0.3; }
  100% { transform: translateY(-180px) scale(1.5) translateX(30px); opacity: 0; }
}

<div class="bg-smoke"><span></span><span></span><span></span><span></span></div>

Tip: Use colored smoke by changing the background to rgba(59, 130, 246, 0.3) for blue smoke or rgba(239, 68, 68, 0.3) for red.

---

85. Voronoi Cells

Animated cell-like pattern with morphing boundaries — scientific and abstract.

How It Works

Five border-only rounded rectangles overlap on the canvas. Each morphs through different border-radius patterns (e.g., 35% 45% 40% 50%) while gently rotating and scaling. The overlapping semi-transparent borders create the cell membrane illusion. The 40% base border-radius gives organic shapes rather than perfect circles or squares.

.bg-voronoi span {
  position: absolute;
  border-radius: 40%;
  border: 1px solid var(--bv-color);
  opacity: 0.3;
  animation: bv-morph var(--bv-speed) ease-in-out infinite alternate;
}

.bg-voronoi span:nth-child(1) { top: 5%; left: 5%; width: 80px; height: 70px; }
.bg-voronoi span:nth-child(2) { top: 15%; left: 55%; width: 90px; height: 65px; animation-delay: -1s; }

@keyframes bv-morph {
  0% { transform: rotate(0deg) scale(1); border-radius: 40%; }
  33% { transform: rotate(5deg) scale(1.1); border-radius: 35% 45% 40% 50%; }
  66% { transform: rotate(-3deg) scale(0.95); border-radius: 45% 35% 50% 40%; }
  100% { transform: rotate(2deg) scale(1.05); border-radius: 38% 42% 48% 35%; }
}

<div class="bg-voronoi"><span></span><span></span><span></span><span></span><span></span></div>

Tip: Add background: rgba(59, 130, 246, 0.05) to each cell for a filled-cell look with subtle color.

---

86. Radar

Sweeping radar scan line — military-style display with pulsing rings.

How It Works

::before creates the circular display with concentric rings using box-shadow: inset. ::after is the sweep line — a horizontal bar with a gradient from the accent color to transparent. It’s positioned at center-left and rotates via transform-origin: left center, creating the scanning beam. The linear timing ensures constant rotation speed.

.bg-radar::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 50%;
  box-shadow: inset 0 0 0 20px transparent, inset 0 0 0 40px rgba(34, 197, 94, 0.1), inset 0 0 0 60px rgba(34, 197, 94, 0.05);
}

.bg-radar::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 4px;
  background: linear-gradient(90deg, var(--br-color), transparent);
  transform-origin: left center;
  animation: br-sweep var(--br-speed) linear infinite;
}

@keyframes br-sweep { to { transform: rotate(360deg); } }

<div class="bg-radar"></div>

Tip: Change the color to #ef4444 for an enemy-detection radar, or #3b82f6 for a tech-science style.

---

87. Lava Lamp

Flowing blobs with color morphing — retro psychedelic.

How It Works

Three blurred blobs start at the bottom and float upward. The magic is in the morphing border-radius — at each keyframe stop, the border-radius changes to a different asymmetric pattern (e.g., 30% 50% 40% 60%), making the blob stretch and squeeze organically. Combined with scale(1.3) at the top, the blob grows and deforms as it rises — just like a lava lamp.

.bg-lava span {
  position: absolute;
  border-radius: 40%;
  filter: blur(8px);
  opacity: 0.7;
  animation: bla-float var(--bla-speed) ease-in-out infinite alternate;
}

.bg-lava span:nth-child(1) { width: 80px; height: 80px; background: var(--bla-color1); bottom: -20px; left: 20%; }
.bg-lava span:nth-child(2) { width: 60px; height: 60px; background: var(--bla-color2); bottom: -10px; left: 60%; animation-delay: -2s; animation-duration: calc(var(--bla-speed) * 1.3); }

@keyframes bla-float {
  0% { transform: translateY(0) scale(1); border-radius: 40%; }
  50% { border-radius: 30% 50% 40% 60%; }
  100% { transform: translateY(-140px) scale(1.3); border-radius: 50% 30% 60% 40%; }
}

<div class="bg-lava"><span></span><span></span><span></span></div>

Tip: Use #8b5cf6 and #06b6d4 for a cool-toned lava lamp, or #f43f5e and #f97316 for warm.

---

88. Topography

Animated topographic contour lines — map-style flowing elevation.

How It Works

Five ellipses (wide rectangles with border-radius: 50%) of different sizes are positioned across the canvas. Each has only a border (no fill) at low opacity. They drift gently via translateX(15px) translateY(-10px) rotate(3deg). The overlapping ellipses at different sizes create the contour line illusion of a topographic map. The subtle 3-degree rotation adds organic movement.

.bg-topography span {
  position: absolute;
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 50%;
  animation: bt-drift var(--bt-speed) ease-in-out infinite alternate;
}

.bg-topography span:nth-child(1) { width: 120px; height: 60px; top: 20%; left: 10%; }
.bg-topography span:nth-child(2) { width: 80px; height: 40px; top: 40%; left: 50%; animation-delay: -1s; }
.bg-topography span:nth-child(3) { width: 160px; height: 80px; top: 10%; left: 30%; animation-delay: -2s; }

@keyframes bt-drift {
  0% { transform: translateX(0) translateY(0) rotate(0deg); }
  100% { transform: translateX(15px) translateY(-10px) rotate(3deg); }
}

<div class="bg-topography"><span></span><span></span><span></span><span></span><span></span></div>

Tip: Use border: 1px solid rgba(34, 197, 94, 0.2) on a dark background for a topographic map in green.

---

89. Ocean Waves

Layered wave motion with multiple depths — calming sea background.

How It Works

Three wave layers at different vertical positions (bottom: 0, bottom: 10px, bottom: 20px) with increasing opacity (0.3, 0.5, 0.7). Each layer is 200% the container width with border-radius: 50% 50% 0 0 creating the wave crest shape. They slide horizontally at different speeds, creating parallax depth. The background gradient (#0c4a6e → #075985) provides the deep ocean feel.

.bg-wave-ocean span {
  position: absolute;
  bottom: 0;
  left: -50%;
  width: 200%;
  height: 40px;
  background: var(--bwo-color);
  border-radius: 50% 50% 0 0;
  opacity: 0.4;
  animation: bwo-wave var(--bwo-speed) ease-in-out infinite alternate;
}

.bg-wave-ocean span:nth-child(1) { bottom: 0; opacity: 0.3; height: 50px; }
.bg-wave-ocean span:nth-child(2) { bottom: 10px; opacity: 0.5; height: 40px; animation-delay: -1s; animation-duration: calc(var(--bwo-speed) * 0.7); }
.bg-wave-ocean span:nth-child(3) { bottom: 20px; opacity: 0.7; height: 35px; animation-delay: -2s; animation-duration: calc(var(--bwo-speed) * 0.5); }

@keyframes bwo-wave {
  0% { transform: translateX(0); }
  100% { transform: translateX(25%); }
}

<div class="bg-wave-ocean"><span></span><span></span><span></span></div>

Tip: Add a gradient background to each wave span (linear-gradient(to bottom, transparent, var(--bwo-color))) for deeper wave color at the base.

---

90. Plasma

Retro plasma color cycling — psychedelic with hue rotation.

How It Works

The simplest background effect — a single div with a 3-color gradient and background-size: 400% 400%. The animation combines background-position movement with filter: hue-rotate() cycling between 0deg and 90deg. This dual animation shifts both the gradient position AND the hue simultaneously, creating the retro plasma color cycling. No pseudo-elements, no child elements needed.

.bg-plasma {
  --bp-speed: 5s;
  width: 300px;
  height: 150px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #ff006e);
  background-size: 400% 400%;
  animation: bp-shift var(--bp-speed) ease infinite;
}

@keyframes bp-shift {
  0% { background-position: 0% 50%; filter: hue-rotate(0deg); }
  25% { background-position: 100% 0%; }
  50% { background-position: 100% 100%; filter: hue-rotate(90deg); }
  75% { background-position: 0% 100%; }
  100% { background-position: 0% 50%; filter: hue-rotate(0deg); }
}

<div class="bg-plasma"></div>

Tip: Use hue-rotate(180deg) at 50% for a more dramatic color shift, or cycle through 360deg for a full rainbow plasma.

---

What’s Next?

That completes all 22 background effects from CSSKit — from subtle gradients to dramatic lightning. Next up: entrance animations — how elements appear on screen with fade-slides, bounces, rotates, flips, and reveals.

Explore all 310 animations live at CSSKit or star the repo on GitHub.