DEV Community

Muhammad Abdu ar Rahman
Muhammad Abdu ar Rahman

Posted on • Originally published at abduarrahman.com

CSS Pixel Art Battle Monsters Part 1 — 10 Creatures with Code

#css #animation #showdev #pixelart

Try them live — All 10 battle monsters are available on CSSKit where you can customize colors and speed. Source code on GitHub. See also Baby Monsters, Elemental Eggs.

The baby monsters have evolved! Battle monsters are larger, more detailed pixel art sprites (~10×10 pixel grids) with idle animations — prowling, creeping, slithering, and floating. All built with the same box-shadow technique on a single <div>.

Battle Monster Technique

These monsters are bigger than the babies — larger pixel grids mean more detail. The animation pattern is consistent:

  • 2-frame idle (0%,100% + 50%) with ease-in-out infinite
  • translateY(-2px) at 50% for a breathing/prowling bob
  • Subtle pixel shifts between frames (leg positions, tentacle movement, tail sway)
  • Scale factor: 2.5x default (range 1.5-4x)
  • Speed: 1s default (range 0.3-4s)

231. Battle Wolf

Fierce wolf with prowling animation — loyal beast with sharp fangs.

See it live on CSSKit — monster wolf animation

How It Works

At the 50% keyframe, translateY(-2px) lifts the wolf into a prowl. The feet pixels at row 8 shift: 2px 8px and 8px 8px move to 3px 8px and 7px 8px — the paws step inward, simulating a creeping gait. Three-tone gray palette gives depth: #e2e8f0 (head), #94a3b8 (body), #64748b (legs).

.MonsterWolf {
  --mwo-speed: 1s;
  --mwo-scale: 2.5;
  width: 1px;
  height: 1px;
  transform: scale(var(--mwo-scale));
  animation: mwo-idle var(--mwo-speed) ease-in-out infinite;
}

@keyframes mwo-idle {
  0%, 100% {
    box-shadow:
      /* head */ 4px 0px #e2e8f0, 5px 0px #e2e8f0,
      /* body */ 2px 3px #94a3b8, 3px 3px #94a3b8, /* ... */
      /* legs */ 2px 8px #64748b, 8px 8px #64748b;
  }
  50% {
    box-shadow: /* same but feet at 3px,7px instead of 2px,8px */;
    transform: scale(var(--mwo-scale)) translateY(-2px);
  }
}
Enter fullscreen mode Exit fullscreen mode 
<div class="MonsterWolf"></div>
Enter fullscreen mode Exit fullscreen mode

232. Giant Spider

Venomous spider with creeping legs — eight-legged terror with red eyes.

See it live on CSSKit — monster spider animation

How It Works

The widest sprite in the set (~12px wide). At 50%, leg pixels at rows 6-8 shift positions — legs spread outward then contract, creating a creeping motion. A single red pixel (#ef4444) at position (3,3) creates a menacing eye. Dark navy palette (#1e293b, #374151) keeps the spider menacing.

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

233. Death Scorpion

Armored scorpion with tail strike — desert predator with amber stinger.

See it live on CSSKit — monster scorpion animation

How It Works

Shares the ~12px width with the spider. At 50%, bottom-row pincer pixels shift subtly, and translateY(-2px) creates a tail-raising bob. Amber stinger tips at positions (0,0) and (11,0) use #fbbf24 (bright yellow) against the dark body #a16207 and #92400e — the contrasting color makes the stinger visually pop.

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

234. Mystic Owl

Wise owl with hovering idle — nocturnal seer with amber body.

See it live on CSSKit — monster owl animation

How It Works

The most compact sprite (~8×8 grid). The translateY(-2px) bob combined with the symmetric silhouette creates an owl hovering silently. Brown tones (#92400e, #78350f) throughout. The bottom feet pixels shift slightly between frames for a perching adjustment.

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

235. Venom Serpent

Slithering snake with coiling tail — the tallest sprite at ~10px height.

See it live on CSSKit — monster snake animation

How It Works

At 50%, the tail pixels at row 9 shift from (4,9) (5,9) to (3,9) (4,9) — the tail sways left by one pixel. Combined with translateY(-2px), this creates a slithering motion. Three green tones (#22c55e head, #16a34a body, #15803d tail) create depth along the snake's length.

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

236–240. More Battle Monsters

236. Cave Bear — Massive bear with standing/prowling idle. At 50%, feet pixels at row 7 shift between two positions (x=0,8 vs x=1,9), simulating a weight-shift step. Earthy brown palette: #92400e (body), #78350f (lower), #6b4f2a (claws). ~10×10 grid.

237. Deep Jellyfish — Bioluminescent jellyfish with the most dramatic animation. At 50%, tentacle pixels at rows 6-8 change significantly — tentacles retract inward (pixels disappear at some positions, appear at others). Purple palette: #c084fc (dome), #a855f7 (tentacles), #7c3aed (tips). This is the most visually active idle in the set.

238. Fungal Shroom — Poisonous mushroom with gentle hover. Both keyframes have identical pixel data — the only animation is translateY(-2px). Pure transform animation. Red cap (#dc2626, #ef4444) with white stem dots (#f1f5f9).

239. Ghost Flame — Undead fire spirit with flickering wisp. At 50%, base pixels at row 7 shift left by 1px — the flame leans as if blown by wind. Cyan palette: #67e8f9 (top), #22d3ee (body), #06b6d4 (core), #0891b2 (base).

@keyframes mgf-idle {
  0%, 100% {
    box-shadow: /* base pixels at row 7: x=1, x=8 */;
  }
  50% {
    box-shadow: /* base pixels shift to x=0, x=9 (flicker) */;
    transform: scale(var(--mgf-scale)) translateY(-2px);
  }
}
Enter fullscreen mode Exit fullscreen mode

240. Crystal Golem — Living crystal construct. Both keyframes have identical pixels — pure translateY(-2px) bob animation. Four-tier cyan palette gives crystalline depth: #a5f3fc (crown), #67e8f9 (upper body), #22d3ee (lower body), #06b6d4 (feet).

Battle Monster Comparison

# Monster Sprite Size Palette Pixel Animation Idle Feel
231 Battle Wolf 8×9 Slate gray Feet step Prowling
232 Giant Spider 12×9 Dark navy + red eye Legs spread/contract Creeping
233 Death Scorpion 12×8 Amber/brown Pincer shift Tail raise
234 Mystic Owl 8×8 Brown Feet shift Hovering
235 Venom Serpent 6×10 Green Tail sway Slithering
236 Cave Bear 10×10 Brown/amber Weight shift Prowling
237 Deep Jellyfish 10×9 Purple/violet Tentacles retract Pulsing
238 Fungal Shroom 10×9 Red/white None (transform only) Hovering
239 Ghost Flame 10×9 Cyan Base flicker Flickering
240 Crystal Golem 10×10 Cyan/light blue None (transform only) Bobbing

What's Next?

That covers the first 10 battle monsters from CSSKit. In the next post, more monsters emerge — including shadow cats, thunder birds, ice wyrms, fire salamanders, and water krakens — followed by 10 elemental dragons (fire, ice, thunder, shadow, crystal, nature, water, wind, ancient, baby emperor).

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)