DEV Community

Muhammad Abdu ar Rahman
Muhammad Abdu ar Rahman

Posted on • Originally published at abduarrahman.com

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

#css #animation #showdev #pixelart

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.

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 */;
  }
}
Enter fullscreen mode Exit fullscreen mode 
<div class="EnvSun"></div>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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, /* ... */;
  }
}
Enter fullscreen mode Exit fullscreen mode 
<div class="EnvCloud"></div>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode 
<div class="EnvLightningBolt"></div>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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 ... */;
  }
}
Enter fullscreen mode Exit fullscreen mode 
<div class="EnvWindSpiral"></div>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Originally published at abduarrahman.com

Explore all 310 animations:

Follow the project:

Support: Ko-fi

Top comments (0)