Try them live — All 15 environment sprites are available on CSSKit where you can customize colors and speed. Source code on GitHub. See also Dragons, Battle Monsters.

The battle monsters and dragons need a world to live in! Environment sprites are the building blocks of a pixel art game world — trees, flowers, mushrooms, rocks, caves, waterfalls, crystals, and treasure chests. All built with the same box-shadow technique on a single <div>.

Environment Animation Patterns

Environment sprites use gentler animations than monsters — no prowling or attacking. Instead:

All use 2.5x scale, 1.5s speed, and ease-in-out infinite — slower and calmer than battle animations.

Part A: Trees (#261-263)

261. Oak Tree

Classic broad-leaf oak with swaying canopy — the staple of any pixel forest.

See it live on CSSKit — env oak tree animation

How It Works

At 50%, all canopy pixels shift +1px to the right while the trunk stays static. This creates a wind-sway effect — the canopy bends right while the trunk holds firm. Three green tiers give the foliage depth: #86efac (light leaf tips), #22c55e (main canopy), #16a34a (shadow foliage). Brown trunk uses #92400e and #78350f.

.EnvOakTree {
  --eot-speed: 1.5s;
  --eot-scale: 2.5;
  width: 1px;
  height: 1px;
  transform: scale(var(--eot-scale));
  animation: eot-sway var(--eot-speed) ease-in-out infinite;
}

@keyframes eot-sway {
  0%, 100% {
    box-shadow:
      /* canopy (light) */ 4px 0px #86efac, 5px 0px #86efac,
      /* canopy (main) */ 3px 1px #22c55e, 4px 1px #22c55e, /* ... */
      /* trunk */ 5px 5px #92400e, 5px 6px #78350f;
  }
  50% {
    box-shadow:
      /* canopy shifts +1px right */
      5px 0px #86efac, 6px 0px #86efac,
      4px 1px #22c55e, 5px 1px #22c55e, /* ... */
      /* trunk stays same */ 5px 5px #92400e, 5px 6px #78350f;
  }
}

<div class="EnvOakTree"></div>

Customize: --eot-speed (0.5-4s), --eot-scale (1.5-4x).

262. Pine Tree

Tall evergreen pine with swaying branches — winter forest essential.

See it live on CSSKit — env pine tree animation

How It Works

Same sway technique as the oak — branch pixels shift +1px at 50%, trunk stays fixed. The pine uses a triangular shape with tiered branches. Darker green palette: #16a34a (branch tips), #15803d (main branches), #166534 (shadow branches). Same brown trunk.

<div class="EnvPineTree"></div>

263. Cherry Blossom

Pink cherry tree with falling petals — the prettiest tree in the forest.

See it live on CSSKit — env cherry blossom animation

How It Works

Canopy pixels sway +1px at 50% just like the oak, but with a pink palette — #fda4af (light pink blossoms), #f472b6 (pink flowers), #ec4899 (hot pink buds). The dark trunk #92400e provides strong contrast against the delicate pink canopy.

.EnvCherryBlossom {
  --ecb-speed: 1.5s;
  --ecb-scale: 2.5;
  width: 1px;
  height: 1px;
  transform: scale(var(--ecb-scale));
  animation: ecb-sway var(--ecb-speed) ease-in-out infinite;
}

Colors: #fda4af (light pink), #f472b6 (pink), #ec4899 (hot pink), #92400e (brown trunk).

<div class="EnvCherryBlossom"></div>

Part B: Plants & Flowers (#264-270)

264. Green Bush

Round foliage bush with gentle sway — ground cover for forests.

See it live on CSSKit — env bush animation

How It Works

At 50%, all foliage pixels shift +1px right AND opacity drops to 0.85. This double effect creates a gentle wind-rustle — the bush sways and slightly dims as leaves flutter. Green palette: #86efac (highlights), #22c55e (body), #16a34a (shadow).

<div class="EnvBush"></div>

265. Red Flower

Bright red flower on a green stem — pops of color in the meadow.

See it live on CSSKit — env flower red animation

How It Works

At 50%, petal pixels shift +1px and opacity drops to 0.85 — a wind-sway effect on a smaller scale. Red petals (#ef4444, #dc2626) contrast with the green stem (#22c55e, #16a34a). The compact ~4×8 sprite is one of the smallest in the set.

<div class="EnvFlowerRed"></div>

266. Blue Flower

Cool blue flower with gentle sway — rare meadow bloom.

See it live on CSSKit — env flower blue animation

Same structure as the Red Flower — only colors change. Blue palette: #60a5fa (petal highlight), #3b82f6 (main petal), #1d4ed8 (petal shadow). Green stem identical.

<div class="EnvFlowerBlue"></div>

267. Red Mushroom

Classic red-capped mushroom — forest floor staple.

See it live on CSSKit — env mushroom red animation

How It Works

At 50%, cap pixels shift +1px right and opacity drops to 0.85. The red cap (#ef4444, #dc2626) sits on a white stem (#f1f5f9, #e2e8f0) — the classic toadstool look. White dot pixels on the cap add the iconic mushroom detail.

<div class="EnvMushroomRed"></div>

268. Glow Mushroom

Bioluminescent mushroom with eerie cyan glow — cave dweller.

See it live on CSSKit — env mushroom glow animation

How It Works

Same sway + opacity pulse as the red mushroom, but with a cyan glow palette: #67e8f9 (cap highlight), #22d3ee (cap body), #06b6d4 (cap shadow). A drop-shadow(0 0 6px #22d3ee) filter creates the bioluminescent aura. The pale stem uses #a5f3fc.

<div class="EnvMushroomGlow"></div>

269. Tall Grass

Waving grass blades — ground texture for meadows and plains.

See it live on CSSKit — env grass tall animation

How It Works

The tallest thin sprite — blade pixels shift +1px at 50% with opacity dropping to 0.85. Multiple thin vertical strips of green (#4ade80, #22c55e, #16a34a) create individual grass blades. The sway makes them wave in the wind.

<div class="EnvGrassTall"></div>

270. Mossy Rock

Ancient stone covered in moss — environmental detail.

See it live on CSSKit — env rock mossy animation

How It Works

No pixel shifting — only an opacity pulse (drops to 0.85 at 50%). This creates a subtle shimmer like light playing across a wet stone surface. Gray stone palette (#94a3b8, #64748b, #475569) with green moss patches (#22c55e) on top.

<div class="EnvRockMossy"></div>

Part C: Features (#271-275)

271. Cave Entrance

Dark cave mouth with flickering shadows — dungeon gateway.

See it live on CSSKit — env cave entrance animation

How It Works

Opacity pulse from 1.0 to 0.85 — the cave mouth seems to flicker between visible and shadowy, as if torchlight is wavering inside. Dark palette: #1f2937 (cave wall), #111827 (dark interior), #374151 (stone frame), #4b5563 (rock detail).

<div class="EnvCaveEntrance"></div>

272. Waterfall

Cascading water over rock face — the only sprite with flowing pixel animation.

See it live on CSSKit — env waterfall animation

How It Works

The only environment sprite with actual pixel changes between frames. At 50%, the water pixels shift — creating a downward flow illusion. Rock pixels (#64748b, #475569) stay static while blue water pixels (#60a5fa, #93c5fd) cascade. The foam at the base (#e0f2fe) adds a realistic splash detail.

.EnvWaterfall {
  --ewf-speed: 1.5s;
  --ewf-scale: 2.5;
  width: 1px;
  height: 1px;
  transform: scale(var(--ewf-scale));
  animation: ewf-flow var(--ewf-speed) ease-in-out infinite;
}

@keyframes ewf-flow {
  0%, 100% {
    box-shadow:
      /* rock frame */ 3px 0px #64748b, 8px 0px #64748b,
      /* water */ 4px 1px #60a5fa, 5px 1px #60a5fa, 6px 1px #60a5fa, 7px 1px #60a5fa,
      4px 2px #93c5fd, 5px 2px #60a5fa, 6px 2px #60a5fa, 7px 2px #93c5fd,
      /* foam */ 4px 7px #e0f2fe, 5px 7px #e0f2fe, 6px 7px #e0f2fe, 7px 7px #e0f2fe;
  }
  50% {
    box-shadow:
      /* rock stays same */
      3px 0px #64748b, 8px 0px #64748b,
      /* water pixels shift down */
      4px 1px #93c5fd, 5px 1px #93c5fd, 6px 1px #60a5fa, 7px 1px #60a5fa,
      4px 2px #60a5fa, 5px 2px #93c5fd, 6px 2px #93c5fd, 7px 2px #60a5fa,
      /* foam shifts */ 4px 7px #60a5fa, 5px 7px #e0f2fe, 6px 7px #e0f2fe, 7px 7px #60a5fa;
    opacity: 0.85;
  }
}

<div class="EnvWaterfall"></div>

273. Crystal Cluster

Glowing crystal formation — magical cave treasure.

See it live on CSSKit — env crystal cluster animation

How It Works

Opacity pulse from 1.0 to 0.85 creates a shimmer effect — the crystals appear to catch and release light. Purple/violet palette: #c084fc (crystal tips), #a855f7 (crystal body), #7c3aed (crystal base). A drop-shadow(0 0 6px #a855f7) adds magical glow.

<div class="EnvCrystalCluster"></div>

274. Lava Pool

Bubbling lava pool — volcanic hazard.

See it live on CSSKit — env lava pool animation

How It Works

Opacity pulse creates a bubbling glow effect — the lava seems to brighten and dim as heat rises. Hot palette: #fbbf24 (yellow surface), #f97316 (orange lava), #ef4444 (red edges), #7f1d1d (dark crust). drop-shadow(0 0 8px #f97316) adds intense heat glow.

<div class="EnvLavaPool"></div>

275. Treasure Chest

Golden chest overflowing with loot — adventure reward.

See it live on CSSKit — env treasure chest animation

How It Works

Opacity pulse creates a gleam effect — the treasure seems to catch light and shimmer. Gold/amber palette: #fef08a (gold highlight), #fbbf24 (main gold), #f59e0b (amber body), #92400e (dark wood base). A drop-shadow(0 0 6px #fbbf24) adds golden radiance.

<div class="EnvTreasureChest"></div>

Environment Sprite Comparison

What's Next?

That covers all 15 environment sprites — trees, plants, mushrooms, and terrain features. In the next posts, we build the sky above (sun, moon, clouds, rain, snow, lightning, rainbows, stars, wind, aurora) and the ground below (terrain tiles and battle items).

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