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:

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.

See it live on CSSKit — env sun animation

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.

See it live on CSSKit — env moon animation

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.

See it live on CSSKit — env cloud animation

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.

See it live on CSSKit — env rain drop animation

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.

See it live on CSSKit — env snow flake animation

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.

See it live on CSSKit — env lightning bolt animation

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.

See it live on CSSKit — env rainbow animation

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.

See it live on CSSKit — env star twinkle animation

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.

See it live on CSSKit — env wind spiral animation

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.

See it live on CSSKit — env aurora mini animation

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

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.

Originally published at abduarrahman.com

Explore all 310 animations:

• Live Demo: CSSKit
• Source Code: GitHub

Follow the project:

• Instagram: @abduarrahman
• YouTube: @abduarrahmanscode
• TikTok: @anduarrahmans

Support: Ko-fi