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:

Animation Type	Effect	Used By
Sway	Canopy pixels shift +1px right at 50%	Trees, grass
Sway + Opacity	Pixel shift + opacity drops to 0.85	Flowers, mushrooms
Opacity pulse	Opacity drops to 0.85 at 50% only	Rock, cave, crystal, lava, chest
Flow	Pixel data changes between frames	Waterfall

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

#	Sprite	Size	Animation	Palette	Effect Feel
261	Oak Tree	~8×9	Canopy sway +1px	3-tier green	Wind sway
262	Pine Tree	~6×10	Branch sway +1px	Dark green	Wind sway
263	Cherry Blossom	~8×9	Canopy sway +1px	Pink + brown	Petal drift
264	Bush	~8×5	Sway + opacity 0.85	Green	Rustle
265	Red Flower	~4×8	Sway + opacity 0.85	Red + green	Wind sway
266	Blue Flower	~4×8	Sway + opacity 0.85	Blue + green	Wind sway
267	Red Mushroom	~6×6	Sway + opacity 0.85	Red + white	Rustle
268	Glow Mushroom	~6×6	Sway + opacity 0.85	Cyan glow	Bioluminesce
269	Tall Grass	~6×6	Sway + opacity 0.85	Light green	Wave
270	Mossy Rock	~8×5	Opacity 0.85 only	Gray + green	Shimmer
271	Cave Entrance	~8×8	Opacity 0.85 only	Dark gray	Flicker
272	Waterfall	~6×9	Pixel flow + opacity	Blue + gray	Flowing water
273	Crystal Cluster	~6×7	Opacity 0.85 only	Purple glow	Shimmer
274	Lava Pool	~8×4	Opacity 0.85 only	Red/orange	Bubble
275	Treasure Chest	~8×6	Opacity 0.85 only	Gold/amber	Gleam

---

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.