DEV Community

Muhammad Abdu ar Rahman
Muhammad Abdu ar Rahman

Posted on • Originally published at abduarrahman.com

CSS Pixel Art Nature — Trees, Plants & Environment with Code

#css #animation #showdev #pixelart

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.

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

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

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

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

<div class="EnvCherryBlossom"></div>
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

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

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

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

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

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

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

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

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

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.

Originally published at abduarrahman.com

Explore all 310 animations:

Follow the project:

Support: Ko-fi

Top comments (0)