Try them live — All 10 terrain tiles are available on CSSKit where you can customize colors and speed. Source code on GitHub. See also Weather & Sky, Environment & Nature.

Every pixel world needs a ground to walk on! Terrain tiles are the building blocks of game maps — grass fields, water bodies, sandy deserts, snowy tundra, volcanic lava, stone paths, wooden bridges, fences, magical portals, and treasure markers. All built with the same box-shadow technique on a single <div>.

Tile Animation Pattern

Terrain tiles are the simplest animations in CSSKit — they all use a pure opacity pulse:

0%, 100%  →  Full opacity (1.0) — tile fully visible
50%       →  Opacity drops to 0.85 — subtle shimmer

This creates a gentle breathing effect that makes tiles feel alive without distracting from gameplay. All tiles use 2.5x scale, 2s speed (slightly slower than sprites), and ease-in-out infinite.

Part A: Ground Tiles (#286-290)

286. Grass Tile

Lush grass tile with gentle shimmer — the default terrain for meadows.

See it live on CSSKit — terrain grass tile animation

How It Works

A dense 12×8 pixel rectangle (96 pixels) with three green tones scattered in a pseudo-random pattern that mimics grass texture. At 50%, opacity: 0.85 creates a subtle breathing shimmer. Green palette: #4ade80 (light highlights), #22c55e (medium), #16a34a (dark base).

.TerrainGrassTile {
  --tgt-speed: 2s;
  --tgt-scale: 2.5;
  --tgt-glow: #22c55e;
  width: 1px;
  height: 1px;
  position: relative;
  left: -28px;
  top: -28px;
  transform: scale(var(--tgt-scale));
  filter: drop-shadow(0 0 3px var(--tgt-glow));
  animation: tgt-anim var(--tgt-speed) ease-in-out infinite;
}

@keyframes tgt-anim {
  0%, 100% {
    box-shadow:
      0px 0px #4ade80, 1px 0px #22c55e, 2px 0px #16a34a, /* ... 12px wide */
      /* 8 rows of 12 pixels = 96 total box-shadows */;
  }
  50% {
    box-shadow: /* identical pixel data */;
    opacity: 0.85;
  }
}

<div class="TerrainGrassTile"></div>

Customize: --tgt-speed (0.5-6s), --tgt-scale (1.5-4x), --tgt-glow (glow color).

287. Water Tile

Deep water tile with shimmering surface — river and ocean terrain.

See it live on CSSKit — terrain water tile animation

How It Works

Same 12×8 dense grid as grass, but with blue tones distributed to mimic water ripple texture. The opacity pulse creates a shimmering water surface effect. Blue palette: #93c5fd (light highlights), #60a5fa (medium), #3b82f6 (deep base).

<div class="TerrainWaterTile"></div>

288. Sand Tile

Desert sand tile with warm shimmer — arid terrain.

See it live on CSSKit — terrain sand tile animation

How It Works

Same 12×8 structure with warm amber/gold tones. The opacity pulse simulates heat shimmer over desert sand. Palette: #fde68a (light sand), #fbbf24 (gold), #f59e0b (dark amber).

<div class="TerrainSandTile"></div>

289. Snow Tile

Frozen snow tile with icy sparkle — winter terrain.

See it live on CSSKit — terrain snow tile animation

How It Works

The subtlest palette — near-white colors that make the opacity pulse feel like icy sparkle. Palette: #ffffff (pure white), #f0f9ff (ice white), #e0f2fe (light blue shadow). The light blue drop-shadow adds a frosty glow.

<div class="TerrainSnowTile"></div>

290. Lava Tile

Volcanic lava tile with bubbling heat — dangerous terrain.

See it live on CSSKit — terrain lava tile animation

How It Works

The most dramatic tile — hot palette makes the opacity pulse feel like bubbling molten lava. Three-tone fire: #fef08a (bright yellow), #f97316 (orange), #ef4444 (red). The red drop-shadow(0 0 3px #ef4444) gives it a dangerous volcanic glow.

<div class="TerrainLavaTile"></div>

Part B: Structures (#291-295)

291. Stone Path

Cobblestone path with moss details — walkable terrain overlay.

See it live on CSSKit — terrain stone path animation

How It Works

Same 12×8 grid but with a unique twist — moss green #86efac pixels scattered sparsely among gray stones. The moss appears at specific positions, simulating growth between cobblestones. Gray palette: #9ca3af (light stone), #6b7280 (dark stone).

<div class="TerrainStonePath"></div>

Colors: #9ca3af (light stone), #6b7280 (dark stone), #86efac (moss accents).

292. Wooden Bridge

Wooden plank bridge with regular grain — water crossing.

See it live on CSSKit — terrain bridge animation

How It Works

A shorter 12×6 grid (72 pixels) with a regular repeating pattern — every row follows the same 4-pixel sequence (light, dark, dark, medium) repeated three times. This creates visible wood plank divisions. Brown palette: #f59e0b (light plank edges), #92400e (dark separators), #d97706 (plank detail).

<div class="TerrainBridge"></div>

293. Wooden Fence

Sparse fence with posts and rails — boundary marker.

See it live on CSSKit — terrain fence animation

How It Works

The most unique tile — instead of a dense grid, it uses a sparse layout with only ~26 pixels:

• Rows 0-2: 3 vertical posts at x=0, x=4, x=8 — each 3 pixels tall in #a16207 (brown)
• Row 3: Horizontal rail from x=0 to x=10 with a gap at x=5 — in #fbbf24 (gold)
• Rows 4-5: Post bases at x=0, x=4, x=8 in #92400e (dark brown)

The transparent gaps between posts create a recognizable fence silhouette.

<div class="TerrainFence"></div>

294. Mystic Portal

Magical portal with purple glow — teleportation gateway.

See it live on CSSKit — terrain portal animation

How It Works

An oval shape instead of a rectangle — top and bottom rows start at x=1 (not x=0), making the edges narrower and creating a portal silhouette. Purple palette: #f0abfc (light magenta), #c084fc (medium purple), #a855f7 (deep purple). The drop-shadow(0 0 3px #a855f7) adds a mystic aura.

<div class="TerrainPortal"></div>

295. Treasure Marker

Golden treasure marker with cross detail — loot location.

See it live on CSSKit — terrain treasure marker animation

How It Works

A small ~8×7 sparse diamond shape (~36 pixels) forming a treasure chest icon:

• Row 0: 4 pixels — top of chest lid
• Row 1: 6 pixels — wider lid
• Rows 2-4: Wider body with alternating gold/brown pixels forming a cross-hatch X pattern
• Rows 5-6: Narrowing base

Gold palette: #fbbf24 (gold outline), #f59e0b (dark gold), #d97706 (brown detail). The golden drop-shadow makes it clearly identifiable as treasure.

<div class="TerrainTreasureMarker"></div>

Terrain Tile Comparison

What's Next?

That covers all 10 terrain tiles — the ground layer of the pixel world. In the final post, we fill the inventory with 15 battle items — health potions, mana potions, antidotes, revive crystals, elemental shards, capture balls, XP orbs, gold coins, keys, and 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