CSS Pixel Art Weather & Sky — Sun, Moon, Rain & Aurora with Code

Try them live — All 10 weather & sky sprites are available on CSSKit where you can customize colors and speed. Source code on GitHub. See also Environment & Nature, Dragons.

---

The pixel world needs a sky! Weather and sky sprites are the celestial layer — sun, moon, clouds, rain, snow, lightning, rainbows, stars, wind, and aurora borealis. All built with the same box-shadow technique on a single <div>.

---

Sky Animation Patterns

Weather sprites use a mix of animation techniques:

Animation Type	Effect	Used By
Ray pulse	Center pixels removed at 50%	Sun
Drift	All pixels shift 1px horizontally	Cloud, Wind Spiral
Opacity pulse	Opacity drops to 0.85 at 50%	Moon, Rain, Snow, Lightning, Rainbow, Star, Aurora

All use 2.5x scale, 1.5s speed, and ease-in-out infinite.

---

276. Bright Sun

Radiant sun with pulsing rays — the center of the pixel sky.

How It Works

The sun uses a unique ray pulse animation — at 50%, center-row pixels are removed while outer rays remain. This makes the sun’s corona appear to contract and expand. Two yellow tones give depth: #fef9c3 (light highlights) and #fbbf24 (amber core). The sprite is ~12×9 pixels — one of the largest in the set.

.EnvSun {
  --esu-speed: 1.5s;
  --esu-scale: 2.5;
  --esu-glow: #fbbf24;
  width: 1px;
  height: 1px;
  transform: scale(var(--esu-scale));
  filter: drop-shadow(0 0 3px var(--esu-glow));
  animation: esu-anim var(--esu-speed) ease-in-out infinite;
}

@keyframes esu-anim {
  0%, 100% {
    box-shadow:
      /* top rays */ 4px 0px #fef9c3, 5px 0px #fef9c3,
      /* full body */ 3px 1px #fef9c3, 4px 1px #fbbf24, 5px 1px #fbbf24, 6px 1px #fef9c3,
      /* center rays + body */ 2px 2px #fef9c3, 3px 2px #fbbf24, /* ... */
      /* bottom rays */ 4px 8px #fef9c3, 5px 8px #fef9c3;
  }
  50% {
    /* Center ray pixels REMOVED — rays contract inward */
    box-shadow: /* fewer center pixels — corona pulses */;
  }
}

<div class="EnvSun"></div>

Customize: --esu-speed (0.5-6s), --esu-scale (1.5-4x), --esu-glow (aura color).

---

277. Crescent Moon

Glowing crescent moon with soft pulse — nighttime guardian.

How It Works

Pure opacity pulse — both keyframes have identical pixel data. At 50%, opacity: 0.85 creates a gentle moonlight fade. Three amber tones draw the crescent: #fef9c3 (bright tips), #fde68a (body), #fbbf24 (base). The right side tapers inward on rows 5-7 to form the crescent shape. ~8×8 pixels.

<div class="EnvMoon"></div>

Colors: #fef9c3 (light tips), #fde68a (body), #fbbf24 (base).

---

278. Fluffy Cloud

Drifting cloud with horizontal movement — the only sky sprite that physically moves.

How It Works

At 50%, every pixel shifts +1px to the right — the entire cloud drifts sideways. Top row shadows move from x:3-8 to x:4-9, body rows shift similarly. This simulates a cloud floating across the sky. Slate palette: #f1f5f9 (top highlight), #e2e8f0 (body), #cbd5e1 (bottom shadow). ~12×6 pixels.

.EnvCloud {
  --ecl-speed: 1.5s;
  --ecl-scale: 2.5;
  --ecl-glow: #e2e8f0;
  animation: ecl-anim var(--ecl-speed) ease-in-out infinite;
}

@keyframes ecl-anim {
  0%, 100% {
    box-shadow:
      /* top bump */ 3px 0px #f1f5f9, 4px 0px #f1f5f9, 5px 0px #f1f5f9, 6px 0px #f1f5f9, 7px 0px #f1f5f9, 8px 0px #f1f5f9,
      /* wide body */ 2px 1px #e2e8f0, /* ... up to x:9 */ ,
      /* bottom */ 1px 4px #cbd5e1, /* ... */;
  }
  50% {
    box-shadow:
      /* ALL pixels shifted +1px right */
      4px 0px #f1f5f9, 5px 0px #f1f5f9, /* ... */;
  }
}

<div class="EnvCloud"></div>

---

279. Rain Drop

Teardrop raindrop with soft pulse — falling from the pixel sky.

How It Works

Opacity pulse from 1.0 to 0.85 — a gentle fade that mimics water catching light. Teardrop shape widens from top to middle then narrows to a point. Blue palette: #93c5fd (top), #60a5fa (body), #3b82f6 (base). Compact ~5×7 pixel sprite.

<div class="EnvRainDrop"></div>

---

280. Snowflake

Crystalline snowflake with twinkle — frozen six-pointed star.

How It Works

Opacity pulse creates a soft twinkle. The snowflake uses a hollow center design — gaps at positions like (4,5), (5,3), (5,4) create the crystalline structure. Alternating #ffffff (white) and #e0f2fe (ice blue) pixels add an icy shimmer. ~10×8 pixels with a cross/diamond pattern.

<div class="EnvSnowFlake"></div>

Colors: #ffffff (white highlights), #e0f2fe (ice blue).

---

281. Lightning Bolt

Zigzag lightning bolt with electric pulse — storm strike.

How It Works

Opacity pulse from 1.0 to 0.85 creates a flickering flash — the bolt seems to surge with electricity. The zigzag shape is built from offset pixel rows — each row shifts left by 1-2 pixels, creating the angular bolt path. Three yellow tones: #fef08a (bright tip), #fbbf24 (main body), #f59e0b (dark base). ~6×9 pixels. The drop-shadow(0 0 3px #fbbf24) adds an electric glow.

@keyframes elb-anim {
  0%, 100% {
    box-shadow:
      /* tip */ 4px 0px #fef08a, 5px 0px #fef08a,
      /* zigzag body */ 3px 1px #fef08a, 4px 1px #fef08a, 5px 1px #fef08a,
      2px 2px #fef08a, 3px 2px #fef08a,
      /* shifts left */ 2px 3px #fbbf24, 3px 3px #fbbf24,
      1px 4px #fbbf24, 2px 4px #fbbf24,
      0px 5px #fbbf24, 1px 5px #fbbf24,
      /* base */ 0px 6px #f59e0b, 1px 6px #f59e0b,
      1px 7px #f59e0b, 2px 7px #f59e0b,
      2px 8px #f59e0b, 3px 8px #f59e0b;
  }
  50% {
    box-shadow: /* identical */;
    opacity: 0.85;
  }
}

<div class="EnvLightningBolt"></div>

---

282. Rainbow Arc

Seven-color rainbow arc with soft pulse — after the storm.

How It Works

The rainbow uses 7 rows, each a different ROYGBIV color — #ef4444 (red), #f97316 (orange), #eab308 (yellow), #22c55e (green), #3b82f6 (blue), #8b5cf6 (violet), #ec4899 (pink). Top 2 rows are narrower (8px) creating the arc shape, bottom 5 rows span full 12px width. Opacity pulse at 50% creates a soft shimmer. The most colorful sprite in the entire collection.

<div class="EnvRainbow"></div>

Colors (top to bottom): Red → Orange → Yellow → Green → Blue → Violet → Pink.

---

283. Twinkling Star

Four-pointed star with diamond twinkle — night sky sparkle.

How It Works

Opacity pulse creates a twinkle — the star brightens and dims like real starlight. Diamond shape: narrow top/bottom points (2px) and wide middle rows (10px). Two-tone gold: #fef9c3 (highlights at points and center) and #fbbf24 (amber cross arms). ~10×6 pixels.

<div class="EnvStarTwinkle"></div>

---

284. Wind Spiral

Swirling wind vortex — the only sprite that shifts position without opacity change.

How It Works

At 50%, all pixels shift 1px to the left — no opacity change. The entire shape drifts left then returns, creating a wobbling wind effect. The sprite is a hollow oval/diamond outline (no center fill) — only edge pixels exist. Slate palette: #e2e8f0 (top/bottom caps), #cbd5e1 (side edges). ~12×7 pixels.

@keyframes ews-anim {
  0%, 100% {
    box-shadow:
      /* top cap */ 4px 0px #e2e8f0, 5px 0px #e2e8f0, 6px 0px #e2e8f0, 7px 0px #e2e8f0,
      /* left edge */ 3px 1px #cbd5e1, /* right edge */ 8px 1px #cbd5e1,
      2px 2px #cbd5e1, 9px 2px #cbd5e1,
      1px 3px #cbd5e1, 10px 3px #cbd5e1,
      /* ...bottom mirrors top */;
  }
  50% {
    /* ALL pixels shifted 1px LEFT */
    box-shadow:
      3px 0px #e2e8f0, 4px 0px #e2e8f0, 5px 0px #e2e8f0, 6px 0px #e2e8f0,
      2px 1px #cbd5e1, 7px 1px #cbd5e1,
      /* ...everything shifted ... */;
  }
}

<div class="EnvWindSpiral"></div>

---

285. Mini Aurora

Northern lights in miniature — the most colorful single sprite.

How It Works

Each row shifts the color sequence by 1 position, creating diagonal color bands that mimic aurora borealis light curtains. Five colors repeat every 5 columns: #22c55e (green), #3b82f6 (blue), #8b5cf6 (violet), #ec4899 (pink), #f43f5e (rose). The solid 12×5 rectangle becomes a flowing aurora through the diagonal gradient. Opacity pulse at 50% adds a shimmer. Violet drop-shadow(0 0 3px #8b5cf6) glow.

<div class="EnvAuroraMini"></div>

---

Weather & Sky Comparison

#	Sprite	Size	Animation	Colors	Sky Layer
276	Sun	~12×9	Ray contraction	Yellow/amber	Day
277	Moon	~8×8	Opacity pulse	Amber/cream	Night
278	Cloud	~12×6	1px right drift	Slate/white	Both
279	Rain Drop	~5×7	Opacity pulse	Blue/cyan	Storm
280	Snowflake	~10×8	Opacity pulse	White/ice blue	Winter
281	Lightning	~6×9	Opacity pulse	Yellow/amber	Storm
282	Rainbow	~12×7	Opacity pulse	7 ROYGBIV colors	Post-storm
283	Star	~10×6	Opacity pulse	Gold/cream	Night
284	Wind Spiral	~12×7	1px left shift	Slate gray	Atmosphere
285	Aurora	~12×5	Opacity pulse	5 diagonal colors	Arctic night

---

What’s Next?

That covers all 10 weather & sky sprites — the celestial layer of the pixel world. In the next posts, we build the ground beneath with terrain tiles (grass, water, sand, snow, lava, stone paths, bridges, fences, portals) and battle items (potions, shards, capture balls, XP orbs, gold coins, keys, scrolls).

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