DEV Community

Muhammad Abdu ar Rahman
Muhammad Abdu ar Rahman

Posted on • Originally published at abduarrahman.com

CSS Pixel Art Terrain Tiles — Ground, Paths & Structures with Code

#css #animation #showdev #pixelart

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

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

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

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

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

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

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

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

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

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

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

Terrain Tile Comparison

# Tile Grid Pixels Shape Palette Theme
286 Grass 12×8 96 Full rectangle Green
287 Water 12×8 96 Full rectangle Blue
288 Sand 12×8 96 Full rectangle Amber/gold
289 Snow 12×8 96 Full rectangle White/ice
290 Lava 12×8 96 Full rectangle Red/orange
291 Stone Path 12×8 96 Full rectangle + moss Gray + green
292 Bridge 12×6 72 Full rectangle Brown/wood
293 Fence 11×6 ~26 Sparse posts+rails Brown/gold
294 Portal 12×8 ~96 Oval (narrow edges) Purple
295 Treasure 8×7 ~36 Diamond/chest icon Gold

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:

Follow the project:

Support: Ko-fi

Top comments (0)